動的に挿入されたHTML要素でjQuery onclickが起動しない？

Question

私のonclickイベントが機能します。 しかし、そのonclickイベントが動的HTML上にある場合、それはもはや機能しません。次のように、何も起こりません。

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

が、私はその後、動的ページに、このHTMLを追加している：

<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> 

をしかし、私は、「（自分のデータを追加）」をクリックしたときに何も起こりません。私のページに静的にHTMLを置くと、 'guestdetails' divのこのトグルが機能します。 動的に挿入されたHTMLにイベントが添付されていないようですか？

UPDATE：私は既存のテーブルに私に行を挿入してい

新しいダイナミックHTML。以上の1行を挿入することができ、ユーザは、私はIDを使用していなかったので

$("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'); 
     } 
    } 
}); 

ではなく、私は要素のラッパを追加しました：他の行は、すでに同様のonclickイベントに添付イベントが、持っています挿入：準備で、その後

と（）関数：

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

最初の問題は、しかし、どうやら私はすべてのT、TRタグの周りのdivをラップする場合ということですrとtdタグは挿入されたHTMLから削除されます！ また、spanをクリックしてguestdetailsを表示しても何も起こりません。 #wrapperあなたは、動的リンクを追加した静的な要素である

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

：

Answer 1

はこれを行います。

だから、あなたは、HTMLソースコード内にハードコーディングされているラッパーがあります。

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

を、あなたは動的なコンテンツとそれを埋めます。その考え方は、ハンドラを動的要素に直接バインドするのではなく、そのラッパーにイベントを委任することです。動的にHTML elements.Hereをバインドするイベントハンドラをアタッチする

Answer 2

使用.on（）このような本

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

か何かのような何かのドキュメントhttp://api.jquery.com/on/

書き込みのためのリンクです。

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

Answer 3

jQuery.on()を動的に挿入HTML要素上の任意のイベントをバインドするために使用されます。このように使用してください：

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