web-dev-qa-db-ja.com

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>

ただし、[（データを追加）]をクリックしても何も起こりません。ページにHTMLを静的に配置すると、「guestdetails」divの切り替えが機能します。動的に挿入されたHTMLに添付されたイベントはないようですか？

更新：

新しいダイナミックHTMLは、既存のテーブルに行を挿入しています。他の行には、次のような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');
        }
    }
});

ユーザーは複数の行を挿入できるため、IDを使用せず、挿入する要素の周りにラッパーを追加しました。

そして、ready（）関数で：

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

ただし、最初の問題は、明らかにdivをtrタグにラップすると、挿入されたHTMLからすべてのtrおよびtdタグが削除されるということです。また、ゲストの詳細を表示するためにスパンをクリックしても何も起こりません。

jquerydocument-ready
15
Flo

これを行う：

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

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

したがって、HTMLソースコードにハードコードされたラッパーがあります。

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

動的コンテンツで埋めます。ハンドラーを動的要素に直接バインドするのではなく、イベントをそのラッパーに委任するという考え方です。

33
underscore

.on（）を使用して、html要素を動的にバインドするイベントハンドラをアタッチします。ここにドキュメントへのリンクがあります http://api.jquery.com/on/

このようなものを書きます

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

またはこのようなもの。

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

jQuery.on（） は、動的に挿入されたHTML要素のイベントをバインドするために使用されます。次のように使用します。

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