103

したがって、現時点では、動的に追加された要素にイベントリスナーをアタッチするには、要素を追加した後にリスナーを再定義する必要があることを理解しています。

これを回避する方法はありますか？それで、余分なコードブロック全体を実行する必要はありませんか？

4

4 に答える 4

202

を使用.on()すると、関数を1回定義でき、動的に追加された要素に対して実行されます。

例えば

$('#staticDiv').on('click', 'yourSelector', function() {
  //do something
});
于 2012-08-22T01:48:21.580 に答える
49 
$(document).on('click', 'selector', handler);

ここclickで、はイベント名でありhandler、関数や無名関数への参照などのイベントハンドラーです。function() {}

PS：動的要素を追加する特定のノードがわかっている場合は、の代わりにそれを指定できますdocument。

于 2012-08-22T01:47:54.497 に答える
6

これらの要素を動的に生成しているため、ページの読み込み時に適用されたリスナーは使用できません。私はあなたのフィドルを正しい解決策で編集しました。基本的に、jQueryは、イベントを親要素にアタッチし、動的に作成された正しい要素に下向きに伝播することで、後でバインドするためのイベントを保持します。

$('#musics').on('change', '#want',function(e) {
    $(this).closest('.from-group').val(($('#want').is(':checked')) ? "yes" : "no");
    var ans=$(this).val();
    console.log(($('#want').is(':checked')));
});

http://jsfiddle.net/swoogie/1rkhn7ek/39/

于 2014-10-01T18:24:21.373 に答える
1

jqueryプラグイン呼び出しで新しい要素を追加するときは、次のようにすることができます。

$('<div>...</div>').hoverCard(function(){...}).appendTo(...)
于 2013-09-18T16:04:16.043 に答える