web-dev-qa-db-ja.com

イベントハンドラが動的コンテンツを処理しない

タグAがあり、クリックすると、クリック時にアクションBを実行するために別のタグBが追加されます。タグ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()メソッドでは、非動的コンテンツに対してはうまく機能しますが、動的コンテンツに対してはうまくいきません。

動的コンテンツに対してどのように機能させることができますか？

jquerydynamic-contentstatic-content
238
edelweiss

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

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

コードをに変更します。

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

JQueryセットはイベントを受け取り、それを引数として与えられたセレクタにマッチする要素に委譲します。これは、liveを使用するときとは反対に、コードを実行するときにjQueryセット要素が存在しなければならないことを意味します。

この答えは非常に注目を集めるので、ここに2つの補足アドバイスがあります。

1）可能であれば、無駄なイベント処理を回避するために、イベントリスナーを最も正確な要素にバインドします。

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

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

しかし使用

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

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

539
Denys Séguret

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

.on(eventType, selector, function)

このセレクターはとても重要です！

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

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

詳しくは jQuery 1.9 .live（）は関数ではない をご覧ください。

26
Samuel Liew