jQuery on()_jquery を使用して動的要素をバインドするときに発生する問題の概要

jQuery on() メソッドは、イベントをバインドするために公式に推奨されるメソッドです。 on() メソッドを使用して、指定したイベントを、追加など、今後動的に作成される動的要素にバインドします。

以前に使用していたときは、常に

でした

$("").on('click','function(){ 
}') 

その後、ドキュメントを確認したところ、バインドできない場合があることがわかりました (要素が動的に生成される場合など)。

を使用するのが正しいことがわかりました。

$(document).on("change","#pageSize_out",function(){ 
if($("#page_out").val()!=0){ 
$("#pageSize").val($(this).val()); 
list(); 
} 
}) 

また、ご注意ください

この回答は多くの注目を集めているため、補足的なアドバイスを 2 つ紹介します:

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

That is, if you're adding an element of class b to an existing element of id a, then don't use
$(document.body).on('click', '#a .b', function(){
but use
$('#a').on('click', '.b', function(){

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

on(events,[selector],[data],fn)

events: スペースで区切られた 1 つ以上のイベント タイプと、「click」や「keydown.myPlugin」などのオプションの名前空間。
selector: イベントをトリガーしたセレクター要素のフィルターの子孫のセレクター文字列。セレクターが null であるか省略されている場合、イベントは選択された要素に到達すると常に発生します。

data: イベントがトリガーされると、event.data がイベント処理関数に渡される必要があります。

fn: イベントがトリガーされたときに実行される関数。 false 値は、false を返す関数の短縮形としても使用できます。

bind() を置き換えます

2 番目のパラメーター 'selector' が null の場合、基本的に on() と binding() の使用法に違いはありません。そのため、on() には、bind() の 'selector' パラメーターよりもオプションが 1 つ多いだけであると考えることができます。 、など on() は簡単に binding() を置き換えることができます

ライブを置換()

1.4 より前は、イベントを現在および将来の要素にバインドできるため、誰もが live() を好んで使用していたと思います。もちろん、1.4 以降では、delegate() も同様のことを実行できます。 live() の原理は非常に単純で、ドキュメントを通じてイベントを委任するため、on() を使用してイベントをドキュメントにバインドすることで live() と同じ効果を実現することもできます。

ライブの書き方()

コードは次のとおりです:

$('#list li').live('click', '#list li', function() {
//function code here.
}); 

on() の書き方

コードは次のとおりです:

$(document).on('click', '#list li', function() {
//function code here.
});

ここで重要なのは、2 番目のパラメーター 'selector' が有効であるということです。これはフィルターとして機能し、選択した要素の子孫要素のみがイベントをトリガーします。

デリゲート()を置き換えます

delegate() は、祖先要素を通じて子孫要素のイベント バインディングの問題を委任する目的で 1.4 で導入されました。これには、ある程度、live() と同様の利点があります。 live() が document 要素を通じて委任されるだけであり、デリゲートは任意の祖先ノードにすることができます。 on()を使ってプロキシを実装する場合の書き方は、基本的にdelegate()と同様です。

delegate()の書き方

コードは次のとおりです:

$('#list').delegate('li', 'click', function() {
//function code here.
});

on() の書き方

コードは次のとおりです:

$('#list').on('click', 'li', function() {
//function code here.
});

第一パラメータと第二パラメータの順序が逆になっているように見えますが、それ以外は基本的に同じです。

概要

jQuery は 2 つの目的で on() を起動しました。1 つはインターフェイスの統合で、もう 1 つはパフォーマンスの向上です。そのため、今後は on() を使用して、bind()、live()、および delegate を置き換えます。特に、 live() はすでに非推奨リストに含まれており、いつでも強制終了されるため、今後は使用しないでください。イベントを 1 回だけバインドし、one() を使用する場合、これに変更はありません。

jquery on() メソッドは動的要素をバインドします

これ以上はナンセンスです。コードを投稿させてください。

<div id="test">
<div class="evt">evt1</div>
</div>

使用方法が間違っています。次のメソッドは、クリック イベントをクラス evt の最初の div にバインドするだけです。append を使用して動的に作成された div はバインドされません。

<script>
// 先绑定事件再添加div
$('#test .evt').on('click', function() {alert($(this).text())});
$('#test').append('<div class="evt">evt2</div>');
</script>

正しい使用法は次のとおりです:

<script>
$('body').on('click', '#test .evt', function() {alert($(this).text())});
$('#test').append('<div class="evt">evt2</div>');
</script>