jQuery onclick không kích hoạt trên các phần tử HTML được chèn động?

Question

Sự kiện onclick của tôi hoạt động. Tuy nhiên, khi sự kiện onclick đó là trên HTML động, nó không còn hoạt động nữa. Như trong: không có gì xảy ra.

$(document).ready(function() { 
    $("#guestlist .viewguestdetails").click(function() {   
     $(".guestdetails[data-id='18']").toggle(); 
    }); 
}); 

tôi sau đó tự động thêm vào HTML này đến một trang:

<div id="guestlist">  
    <span class="completeguestdetails" data-id="18">(add your data)</span> 
     <div class="guestdetails" data-id="18" style="display: none;"> 
      some data 
     </div> 
</div> 

Tuy nhiên, khi tôi sau đó click vào "(thêm dữ liệu của bạn)" có gì xảy ra. Khi tôi có HTML tĩnh trong trang của tôi, việc chuyển đổi này của div 'guestdetails' không hoạt động. Dường như không có sự kiện nào được đính kèm với HTML được chèn động?

UPDATE:

HTML động mới Tôi đang chèn i một hàng trong một bảng hiện có. Các hàng khác đã có các sự kiện gắn liền với các sự kiện onclick, như:

$("span.guestattendance").click(function() { 
    if ($(this).hasClass('checkbox-on')) { 
     $(this).removeClass('checkbox-on').addClass('checkbox-off'); 
     $("#guestday").removeClass('checkbox-on').addClass('checkbox-off'); 
    } 
    else { 
     $(this).removeClass('checkbox-off').addClass('checkbox-on');    
     if ($("#guestceremony").hasClass('checkbox-on') && $("#guestreception").hasClass('checkbox-on') && 
     $("#guestdiner").hasClass('checkbox-on') && $("#guestparty").hasClass('checkbox-on')) { 
      $("#guestday").removeClass('checkbox-off').addClass('checkbox-on'); 
     } 
    } 
}); 

Kể từ khi một người sử dụng có thể chèn nhiều hơn 1 hàng, tôi đã không sử dụng id, nhưng thay vì thêm một wrapper xung quanh các yếu tố tôi chèn:

và sau đó trong sẵn sàng() chức năng:

$('.newrow_wrapper').on('click', 'span', function() { 
    $(".guestdetails[data-id='" + $(this).attr('data-id') + "']").toggle(); 
}); 

vấn đề đầu tiên tuy nhiên, đó là rõ ràng khi tôi quấn một div xung quanh một thẻ tr, tất cả các t Thẻ r và td được xóa khỏi HTML được chèn! Ngoài ra khi tôi nhấp vào khoảng để xem guestdetails không có gì xảy ra.

Answer 1

Làm điều này:

$('#wrapper').on('click', 'a', function() { ... }); 

nơi #wrapper là một yếu tố tĩnh, trong đó bạn thêm các liên kết động.

Vì vậy, bạn có một wrapper được mã hóa cứng vào trong mã nguồn HTML:

<div id="wrapper"></div> 

và bạn điền vào nó với nội dung động. Ý tưởng là ủy quyền các sự kiện cho trình bao bọc đó, thay vì các trình xử lý ràng buộc trực tiếp trên các phần tử động.

Answer 2

Sử dụng .Trên() để đính kèm xử lý sự kiện mà tự động liên kết html elements.Here là liên kết cho các tài liệu http://api.jquery.com/on/

viết một cái gì đó như thế này

 $('#someid').on('click', function() { ... }); 

hoặc một cái gì đó như thế này.

  $(document).on('click', 'tag_name', function() { ... }); 

Answer 3

jQuery.on() được sử dụng để ràng buộc bất kỳ sự kiện nào trên các phần tử HTML được chèn động. Sử dụng nó như thế này:

$(document).ready(function() { 
    $(document).on('click',"#guestlist .viewguestdetails",function() {   
     $(".guestdetails[data-id='18']").toggle(); 
    }); 
});