261

クリックすると別のタグ B が追加され、クリック時にアクション B が実行されるタグ A があります。したがって、タグ B をクリックすると、アクション B が実行されます。ただし、.on動的に作成されたタグ B ではメソッドが機能していないようです。

タグ A の私の html と jquery は次のとおりです。

<a id="address" class="add_address btn btn-inverse btn-medium pull-right push-top">Add Shipping address</a>

$('.add_address').click(function(){
    //Add another <a>
    $(document).append('<a id="address"  class="pull-right update btn btn-inverse btn-medium push-top">Update</a>');
})

タグ B がクリックされると、いくつかのアクション B が実行されます。私のjqueryは以下の通りです：

$('.update').on('click',function(){
  //action B
});

クラス「.update」を持つ非動的コンテンツもあります。上記の.on()方法では、非動的コンテンツでは問題なく機能しますが、動的コンテンツでは機能しません。

動的コンテンツで機能させるにはどうすればよいですか?

4

2 に答える 2

589

セレクターパラメーターを追加する必要があります。そうしないと、イベントはデリゲートではなく直接バインドされます。これは、要素が既に存在する場合にのみ機能します (したがって、動的に読み込まれたコンテンツでは機能しません)。

http://api.jquery.com/on/#direct-and-delegated-eventsを参照してください

コードを次のように変更します

$(document.body).on('click', '.update' ,function(){

jQuery セットはイベントを受け取り、引数として指定されたセレクターに一致する要素にそれを委譲します。これは、 を使用する場合とは逆にlive、コードを実行するときに jQuery セット要素が存在する必要があることを意味します。

この回答は多くの注目を集めているため、ここに 2 つの補足的なアドバイスがあります。

1)可能であれば、イベントリスナーを最も正確な要素にバインドして、無駄なイベント処理を回避してください。

つまり、 classbの要素を id の既存の要素に追加する場合は、a使用しないでください

$(document.body).on('click', '#a .b', function(){

しかし使う

$('#a').on('click', '.b', function(){

2) id を持つ要素を追加するときは、2 回追加しないように注意してください。HTML で同じ ID を持つ 2 つの要素を持つことは「違法」であるだけでなく、多くのことを壊します。たとえば、セレクター"#c"は、この ID を持つ要素を 1 つだけ取得します。

于 2013-02-26T13:57:06.170 に答える
30

関数にセレクターがありません.on:

.on(eventType, selector, function)

このセレクターは非常に重要です。

http://api.jquery.com/on/

新しい HTML がページに挿入されている場合は、要素を選択し、新しい HTML がページに配置された後にイベント ハンドラーを添付します。または、 委任されたイベントを使用してイベント ハンドラーをアタッチします。

詳細については、jQuery 1.9 .live() は関数ではありませんを参照してください。

于 2013-02-26T13:59:15.947 に答える