3

onjQueryの代わりに、静的に作成された DOM 要素に jQuery を使用できますかclick (それが機能することはわかっていますが、使用するのに適しているか知りたいですか?)

これの違いは何ですか

$('body').on('click', '#joinSession', function(){}) と$('#joinSession').on('click', function() {})

私はjsfiddleを作成しましたが、両方の方法で同じ結果が得られますが、これには何が大きな違いがありますか?

HTML

<div class="container">
    <div class="controls">
        <input type="button" value="Create session" id="createSession"/>
        <input type="button" value="Join session" id="joinSession"/>
    </div>
    <div class="othersVideos"></div>
    <div class="ownVideo"></div>
</div>

Jquery スクリプト

$('#createSession').on('click', function() {
    alert('test');
});

$('body').on('click', '#joinSession', function() {
    alert('testing')
});
4

5 に答える 5

4 
$('#createSession').on('click', function() {
    alert('test');
});

これにより、クリック ハンドラーがセレクターに一致する任意の要素に直接バインドされます。バインド呼び出し時に要素が見つからない場合は、何もしません。

$('body').on('click', '#joinSession', function() {
    alert('testing')
});

これは、イベント委任を使用し、クリック ハンドラーをbody. イベントが にバブルアップするたびにbody、jQuery はイベントの発生場所を調べます。2 番目のパラメーター セレクターに一致するものから発生した場合、ハンドラーがトリガーされます。これにより、まだ存在していない可能性のある要素にイベントをバインドできます。イベントがトリガーされた時点で存在している限り、ハンドラーはそれらに適用されます。

2 番目の構文は、パフォーマンスとメモリの利点があるため、ほとんど常に使用する必要があります。最良の結果を得るには、 の代わりに、可能な限り高速 (id) で要素に近いセレクターを使用する必要がありますbody。イベント委任の詳細については、jqFundamentalsを確認してください。

于 2013-06-26T13:33:18.133 に答える
3

最初のモデルはイベントを要素に直接バインドします。この方法の欠点は、スクリプトの実行時にソース要素が存在しなければならないことです。

2 番目のモデルはハンドラーをドキュメント本体にバインドし、イベント ソース要素のいずれかの祖先/自己のセレクター条件が true の場合、イベント伝達を使用してハンドラーを起動します。これは、イベント登録コードが実行されたときにターゲット要素がドキュメントに存在しない可能性があるため、動的要素を扱っている場合に役立ちます。

于 2013-06-26T13:32:33.280 に答える
3

最初の例:

$('#createSession').on('click', function() {
    alert('test');
});

IDで特定の要素を探しています。要素がページに存在しない場合、クリック イベントはこれに追加されません。

2 番目の例:

$('body').on('click', '#joinSession', function() {
    alert('testing');
});

クリック イベントを本文にバインドするため、クリック イベントのバインド#joinSession時に存在しなかった場合でも、後でこの要素を本文に追加でき、イベントを再度バインドしなくてもクリック イベントが機能します。これは、動的 UI があり、特定の要素が後で追加されることがわかっているが、イベントを一度だけバインドし、新しい要素がドキュメントに追加されるたびに再バインドすることを心配したくない場合に便利です。

于 2013-06-26T13:33:14.037 に答える
2 
$('#myDiv .div').on('click', function() {
    alert('test');
});

.divdiv内に複数の があるとします#myDiv。上記のコードは、一致したすべての要素にイベントをアタッチします。1,000 個の div があるとしますか? 1,000 の異なる要素にイベントを関連付けます。

$('#myDiv').on('click', '.div', function() {
    alert('testing')
});

上記は、要素を にのみアタッチし、 でイベントが発生した#myDivときにトリガーしますが、それが一致する要素にもある場合のみです。そうすれば、 内の 1,000 個の div に対して、イベント ハンドラーが 1 つだけになり、オーバーヘッドとパフォーマンスの問題が回避されます。また、後者は動的に生成された要素、つまり動的要素として AJAX または jQuery 自体を介して作成された要素で機能します。click#myDiv.div#myDiv

于 2013-06-26T13:34:07.460 に答える
0

$(element).on('event',element, function(){...}新しく作成された要素に使用して、機能を維持します。

ここでこの例を確認してください

于 2013-06-26T13:33:33.430 に答える