ugrás a tartalomhoz

JQuery append,click avagy futásidő probléma

Apofiszh · 2009. Júl. 30. (Cs), 20.41
Sziasztok!

Olyan problémába ütköztem,hogy futás időben appendal egyik divből a másik divbe szeretnék pakolgatni html kódot, de valamiért az appendal létrehozott divekre a click esemény nem akar működni.

Hogy lehet futás időben előállított div-ekhez eseményt hozzárendelni?

Ha valaki tudja a választ legyen szíves ossza meg velem, köszönöm szépen előre is.

A kódom:

$(".egy_cimzett_nev").click(function(event){
event.preventDefault();
var ceg_id = $(this).parent().attr("id");
var nev = $(this).html();
$(".uj_uzenet_cimzettek_input").append('<div class="cimzett_add_sor" id="'+ceg_id+'"><div class="cimzett_add_neve">'+nev+'</div><div class="cimzett_x">X</div></div>');
$($(this).parent()).remove();

});

$(".cimzett_x").click(function(event){
event.preventDefault();
alert("lesz valami?");
var ceg_id = $(this).parent().attr("id");
var nev = $($(this).parent()+".cimzett_add_neve").html();
$(".uj_uzenet_cimzettek_lista").append('<div class="egy_cimzett" id="'+ceg_id+'"><div class="egy_cimzett_checkbox"><input type="checkbox"></div><div class="egy_cimzett_nev">'+nev+'</div></div>');
$($(this).parent()).remove();
});

Üdv A,
‹ Submit ne a lap tetejére dobjon Keresőbarát weblap kialakítása ›
 ■
1

Append + esemény

Poetro · 2009. Júl. 30. (Cs), 22.30
  1. $('#valami').append(  
  2.   $('<div>Kattanj ra</div>').click(function () {   
  3.     alert('Rakattantal');  
  4.   })  
  5. );  
2

Nekem nem megy

Apofiszh · 2009. Júl. 30. (Cs), 22.59
  1. $(".egy_cimzett_nev").click(function(event){  
  2.         event.preventDefault();  
  3.         var ceg_id = $(this).parent().attr("id");  
  4.         var nev = $(this).html();  
  5.         $(".uj_uzenet_cimzettek_input").append('<div class="cimzett_add_sor" id="'+ceg_id+'"><div class="cimzett_add_neve">'+nev+'</div>'+$('<div class="cimzett_x">X</div>').click(function(event){  
  6.         event.preventDefault();  
  7.         alert("lesz valami?");  
  8.         var ceg_id = $(this).parent().attr("id");  
  9.         var nev = $($(this).parent()+".cimzett_add_neve").html();  
  10.         $(".uj_uzenet_cimzettek_lista").append('<div class="egy_cimzett" id="'+ceg_id+'"><div class="egy_cimzett_checkbox"><input type="checkbox"></div><div class="egy_cimzett_nev">'+nev+'</div></div>');  
  11.         $($(this).parent()).remove();  
  12.     })+'</div>');  
  13.       
  14.         $($(this).parent()).remove();  
  15.     });  
4

akkor bontsd szét először

Ustak · 2009. Júl. 30. (Cs), 23.10
  1. var x_div = $('<div class="cimzett_x">X</div>');  
  2. x_div.click(function(){alert("nohát")});  
  3. //egyéb blabla;  
  4. $(".uj_uzenetek_input_nak_az_a_resze_ahova_akarod_de_mar_legyen_benne_a_DOM_ban").append(x_div);  
valahogy így:-)
Üdv:
Gábor

Ui:(Tudom hogy szennyezzük a globális névteret, tudom hogy lehetne closure -ban, stb stb :-))
3

Így van

Ustak · 2009. Júl. 30. (Cs), 23.02
A #cimzett_x divet a click-ed hozza létre, mikor az interpreter végigszalad a kódon, nem talál #cimzett_x divet (mert még nincs) és nem is köt ezért hozzá eseményt.
Másik hasonló mókás dolog az ajax töltés, mikor a kódban az ajax hívás hiába van "előtte" az ajax eredményét használó kódnak, honnan tudjuk, hogy vajon "megjön" -e addigra :-) Ezek mókás becsapós dolgok.
Üdv:
Gábor.
5

[object Object]

Apofiszh · 2009. Júl. 30. (Cs), 23.51
  1. $(".egy_cimzett_nev").click(function(event){  
  2.     event.preventDefault();  
  3.     var ceg_id = $(this).parent().attr("id");  
  4.     var nev = $(this).html();  
  5.     var div_x = $('<div class="cimzett_x">X</div>');  
  6.     div_x.click(function(event){  
  7.         event.preventDefault();  
  8.             $(".uj_uzenet_cimzettek_lista").append('<div class="egy_cimzett" id="'+ceg_id+'"><div class="egy_cimzett_checkbox"><input type="checkbox"></div><div class="egy_cimzett_nev">'+nev+'</div></div>');  
  9.         $($(this).parent()).remove();  
  10.         alert("aaa");  
  11.     });  
  12.       
  13.     $(".uj_uzenet_cimzettek_input").append('<div class="cimzett_add_sor" id="'+ceg_id+'"><div class="cimzett_add_neve">'+nev+'</div>'+div_x+'</div>');  
  14.     $($(this).parent()).remove();  
  15. });  
a X tartalmú div nem jön létre helyette azt írja,h [object Object] de az előtte lévő divet a névvel jól átírja
7

Nem jön létre?

Poetro · 2009. Júl. 31. (P), 00.23
Létrejön, csak nem szúrod be a fába, ezért nem jelenik meg. Valamihez hozzá kellene adni a div_x-et, hogy meg is jelenjen.
8

Hogy?

Apofiszh · 2009. Júl. 31. (P), 00.31
Hogy kell beszúrni a fába? és milyen fába?
Ilyen mélységében még nem foglalkoztam a jQueryvel:(
9

beszúrás

Poetro · 2009. Júl. 31. (P), 00.46
  1. $(".uj_uzenet_cimzettek_input").append(  
  2.   $('<div class="cimzett_add_sor" id="'+ ceg_id +'"><div class="cimzett_add_neve">'+ nev +'</div></div>').find('.cimzett_add_sor').append(div_x);  
  3. );  
10

Semmi

Apofiszh · 2009. Júl. 31. (P), 01.01
  1. $(".egy_cimzett_nev").click(function(event){  
  2.         event.preventDefault();  
  3.         var ceg_id = $(this).parent().attr("id");  
  4.         var nev = $(this).html();  
  5.         var div_x = $('<div class="cimzett_x">X</div>');  
  6.         div_x.click(function(event){  
  7.             event.preventDefault();  
  8.             $(".uj_uzenet_cimzettek_lista").append('<div class="egy_cimzett" id="'+ceg_id+'"><div class="egy_cimzett_checkbox"><input type="checkbox"></div><div class="egy_cimzett_nev">'+nev+'</div></div>');  
  9.             $($(this).parent()).remove();  
  10.             alert("aaa");  
  11.         });  
  12.           
  13.         var valami = '<div class="cimzett_add_sor" id="'+ceg_id+'"><div class="cimzett_add_neve">'+nev+'</div></div>';  
  14.         $(".uj_uzenet_cimzettek_input").append(valami).find('.cimzett_add_sor').append(div_x);  
  15.         $($(this).parent()).remove();  
  16.     });  
mostmár le se másolja a "név" divet se,jóformán csak a remove része működik most
11

bocs

Apofiszh · 2009. Júl. 31. (P), 01.07
bocsi, működik, késő van már benéztem vmit

köszi szépen!,
már csak azt kell megoldani,h az "x"re visszapakoltat megint át tudjam pakolni :)
12

Nem ismerem

Ustak · 2009. Júl. 31. (P), 09.04
a problémádat teljesen, de nem lenne egyszerűbb a .hide() .show() .animate() stb függvényekkel már meglévő, de (kezdetben) css display:none tulajdonsággal rendelkező diveket feltölteni, pakolgatni, elrejteni, mutogatni? a .text() vagy .html() függvénnyekkel rakhatsz meg vehetsz el belőlük tartalmat. Így a divek már eleve benne vannak a Dom (Document Object Model) fában, így az $() selector megtalálja őket, és nem ütközöl ilyen problémákba. Aztán később mikor javascript ninja leszel, bonyolítod :-)
Üdv:
Gábor.
13

Én is

Apofiszh · 2009. Júl. 31. (P), 10.25
Erre gondoltam én is de olyan egyszerűnek tűnt , ezért a nehezebbet választottam, így tanultam újat is :)
6

live

duplabe · 2009. Júl. 31. (P), 00.13
nezz korul a live oldalan: http://docs.jquery.com/Events/live
14

Bár már megvan a megoldás,

yaanno · 2009. Júl. 31. (P), 17.46
Bár már megvan a megoldás, azért tényleg érdemes megnézni az oldalt; ha másért nem, akkor azért, hogy onnan eljuss az event delegation-höz. Érdemes kihasználni ezt az egyszerű lehetőséget.
15

Nagyon jó cikk

Ustak · 2009. Júl. 31. (P), 21.39
és tényleg a fenti probléma legjobb megoldása lenne!
Béke:
Gábor.