[解決済み] jQuery onclick が動的に挿入された HTML 要素で発火しない？重複

質問

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>

しかし、次に "(add your data)"をクリックしても何も起こりません。私のページに静的なHTMLがある場合、'guestdetails' divのこのトグルは動作します。 動的に挿入されたHTMLに付随するイベントはないようですね。

UPDATEしてください。

新しいダイナミックHTMLは、既存のテーブルの1行に挿入しているんだ。他の行にはすでにonclickイベントが添付されている、みたいな。

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

ユーザーは1行以上挿入できるので、idを使わず、挿入する要素の周りにラッパーを追加しました。

で、ready()関数の中で

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

しかし、最初の問題は、div を tr タグで囲むと、挿入された HTML から tr と td のタグがすべて削除されてしまうことです! また、spanをクリックしてguestdetailsを表示させても何も起こりません。

どうすればいいですか？

こうしてください。

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

ここで、#wrapper は動的なリンクを追加する静的な要素です。

つまり、HTMLのソースコードにハードコードされたラッパーがあるわけです。

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

を作成し、それを動的なコンテンツで満たします。このアイデアは、動的要素に直接ハンドラをバインドするのではなく、ラッパーにイベントを委譲することです。