Skocz do zawartości
maxell2k11

jQuery problem

Polecane posty

Witam wszystkich,

 

do rzeczy:

 

mam sobie kod html:

 

<div id="kalendarz"></div>

 

 

nastepnie za pomocą jquery:

 

$.("#kalendarz").html("<div class='elem'>1</div><div class='elem'>2</div><div class='elem'>3</div>");

 

wgrywam do #kalendarz poszczególne divy 'elem'

 

OK

 

jednak teraz mam kod który fajnie zaznacza te divy poprzez .drag jquery (działa OK w momencie kiedy nie robimy dynamicznego ładowania poprzez .html() )

 

 

<script type="text/javascript">

jQuery(function($){

$( document )

.drag("start",function( ev, dd ){

return $('<div class="selection" />')

.css('opacity', .65 )

.appendTo( document.body );

})

.drag(function( ev, dd ){

$( '.elem' ).removeClass("dropped");

$( dd.proxy ).css({

top: Math.min( ev.pageY, dd.startY ),

left: Math.min( ev.pageX, dd.startX ),

height: Math.abs( ev.pageY - dd.startY ),

width: Math.abs( ev.pageX - dd.startX )

});

})

.drag("end",function( ev, dd ){

 

$( dd.proxy ).remove();

 

});

$('.elem')

.drop("start",function(){

$( this ).addClass("active");

 

})

.drop(function( ev, dd ){

$( this ).toggleClass("dropped");

 

})

.drop("end",function(ev,dd){

$( this ).removeClass("active");

// $('#res').html(($(dd.target).attr('id')));

 

});

$.drop({ multi: true });

 

});

</script>

 

 

 

 

Nie mogę się odwoływać do tych div.elem tak jak wspomniałem dlatego że są ładowane ddynamicznie poprzez .html - ktoś ma na to sposób ?

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Ok, sprawdzę...

A macie jakiś pomysł aby funkcja X wykonywała się już po zakończniu akcji drag and drop select ?

 

.drop("end",function(ev,dd){

funckcjaXXXX(); // ale jest wykonywana kilka razy podczas operacji a chcęaby byla tylko raz po wszystkim

});

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Chodzi o rozwiązanie tego problemu:

 

http://stackoverflow...ally-added-divs

 

 

Chodzi o rozwiązanie tego problemu ( czyli działa wszystko ładnie ale jak damy dodawanie dynamiczenie elementów to już nie są one objęte skryptem ... "nie widzi" tego skrypt...

 

 

 

 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<script src="http://threedubmedia.com/inc/js/jquery-1.7.2.js"></script>

<script src="http://threedubmedia.com/inc/js/jquery.event.drag-2.2.js"></script>

<script src="http://threedubmedia.com/inc/js/jquery.event.drag.live-2.2.js"></script>

<script src="http://threedubmedia.com/inc/js/jquery.event.drop-2.2.js"></script>

<script src="http://threedubmedia.com/inc/js/jquery.event.drop.live-2.2.js"></script>

<title>Testpage</title>

</head>

<body>

<script type="text/javascript">

jQuery(function($){

$('#foo').click(function(){

$('#main').append($('<div class="drop">foo</div>'))

});

$( document )

.drag("start",function( ev, dd ){

return $('<div class="selection" />')

.css('opacity', .65 )

.appendTo( document.body );

})

.drag(function( ev, dd ){

$( dd.proxy ).css({

top: Math.min( ev.pageY, dd.startY ),

left: Math.min( ev.pageX, dd.startX ),

height: Math.abs( ev.pageY - dd.startY ),

width: Math.abs( ev.pageX - dd.startX )

});

})

.drag("end",function( ev, dd ){

$( dd.proxy ).remove();

})

 

.on("dropstart", ".drop", function(){

$(this).addClass("active");

})

.on("drop", ".drop", function(){

$(this).toggleClass("dropped");

})

.on("dropend", ".drop", function(){

$(this).removeClass("active");

});

$.drop({ multi: true });

 

});

</script>

 

<h1>Live adding of selectable elements</h1>

<p>Click and drag to select any number of dashed boxes.</p>

 

<input type="button" id="foo" value="Add a box"/>

<div id="main"></div>

 

<style type="text/css">

.selection {

position: absolute;

border: 1px solid #89B;

background: #BCE;

background-color: #BEC;

border-color: #8B9;

}

.drop {

float: left;

border: 1px dashed #888;

background: #EEE;

text-align: center;

padding: 20px;

margin: 0 10px 10px 0;

}

.dropped {

background-color: #EBC;

border-color: #B89;

}

.active {

background-color: #CEB;

border-color: #9B8;

}

</style></body>

</html>

Edytowano przez maxell2k11 (zobacz historię edycji)

Udostępnij ten post


Link to postu
Udostępnij na innych stronach
Gość AceDude
$(document).on('click', '.klasa', function(e) {
    console.log('Klik klik');

   });

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Bądź aktywny! Zaloguj się lub utwórz konto

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony

Utwórz konto

Zarejestruj nowe konto, to proste!

Zarejestruj nowe konto

Zaloguj się

Posiadasz własne konto? Użyj go!

Zaloguj się


×