2009-02-25 21 views
9

Bu div içinde bir HTML eklemek istiyorum ve HTML'de de bir tıklama olayı olması gerekiyor.jQuery kullanarak HTML w/click olayı ekleme

<div id="myID"> 
     <p>hello, world!</p> 
    </div> 

Yukarıda div içindeki yeni div eklemek istediğiniz ve ben orada eklemek yeni HTML yapılan bir tıklama olayı istiyorum. Yeni div içinde dinamik bir metin olacak, böylece dinamik olarak oluşturulacak.

Nasıl Yapılır?

cevap

12

Ne hakkında: jQuery 1.3 itibariyle

$("#myID").click(
    function() { 
    var someText = "my dynamic text"; 
    var newDiv = $("<div>").append(someText).click(function() { alert("click!"); }); 
    $(this).append(newDiv); 
    } 
) 
0

Andrew çözmek:

<div class="myClass"> 
<p>hello, world!</p> 
</div> 


$(".myClass").live("click", function(){ 
    $(this).after("<div class='myClass'><p>Another paragraph!</p></div>"); 
}); 

bu sayfada canlı etkinlikler hakkında daha fazla bilgi Bu sorun bana! Ancak .live, jQuery'nin son sürümlerinde (1.7'den itibaren) kullanılmamaktadır. Bu olay türlerini bağlamak için .on veya .delegate üst.document öğelerini kullanın. Bakınız:

$(document).on(".myClass", "click", function(){ 
    $(this).after("<div class='myClass'>Another paragraph!</div>"); 
}); 

Arkadaşım tebrikler! ÖNEMLİ

1

:

en belirli seçici kullanırsanız performans daha iyi olması gerektiğini dikkate alacaktır. Eğer "MyID" div içinde div'leri etkileyen sadece istediğiniz takdirde, bu durumda, siz kullanmalısınız:

$("#MyId").on("click", "div", function(e) { 
    // Whatever you want to do when the divs inside #MyId div are clicked 
}); 

ÇOK ÖNEMLİ:

hesaba çekeriz yöntemine ilişkin ikinci parametre, Bu durumda "div", isteğe bağlıdır, ancak olayın dinamik olarak oluşturulmuş öğelere otomatik olarak eklenmesini istiyorsanız bunu sağlamanız gerekir. Bu "on" yöntemi için jquery belgelerinde ertelenmiş olarak adlandırılır. Umarım bu bilgi gelecekte bunu okumak için zaman kazandırır :)