クラス関連のonclickイベントは1回だけトリガされるのはなぜですか？

Question

私はこのメソッドをクラス.delete_filterのすべての要素にバインドしました。 最初に、メソッドによって呼び出されるべきurlを含む 'data'属性を取得します。それから私は何か他のことをしていないスクリプトを呼び出して、リロードされているすべてのdivを典型的な "wait ... loading data" divに置き換えます。それはうまく動作しますが、私は一度だけ私が望むように他のリンクをクリックすることができます何も起こらず、これは私を狂って運転していると私はすでに本当に怒っている！

$(".delete_filter").click(function() { 
    url=$(this).attr('data'); 
    $.getScript("http://blabla.com/ajax/wait/filters:info", function() { 
      $.getScript(url); 
    }); 
});  

ここで失敗しますか？

Answer 1

DOMを変更すると、変更している部門にclickイベントをアタッチした要素が含まれることがあります。

この場合、on \ live \ delegateの機能を使用する必要があります。
これらの関数は、現在レンダリングされている要素と後で動的に追加される要素で同じものを「動作」させます。

$(selector).live(events, data, handler);    // jQuery 1.3+ 
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+ 
$(document).on(events, selector, data, handler);  // jQuery 1.7+ 

onバージョン：

$("body").on("click", ".delete_filter", function(){ 
     url=$(this).attr('data'); 
     $.getScript("http://blabla.com/ajax/wait/filters:info", function() { 
       $.getScript(url); 
     }); 
    }); 

Answer 2

クラス要素にクリックバインドを適用すると、コードを実行したときにそのクラスを持つ要素にのみ適用されます。つまり、動的に.delete-filterクラスを追加する場合は、コードを再度実行する必要があります。

Answer 3

jQueryがリクエスト/レスポンスをキャッシュしている可能性があります。クリックするたびにURLを変更してみてください。これを試して。

$(".delete_filter").click(function() { 
    var url=$(this).attr('data'); 
    $.getScript("http://blabla.com/ajax/wait/filters:info?r=" + Math.random(), function() { 
      $.getScript(url); 
    }); 
});