3

jQueryon()バージョン 1.7 を使用します。私は通常、次のようにイベントをバインドします。

$(".foo").on("click", function() {
    console.log("foo clicked");
})

他の誰かのコードを見た後、特定の要素のセカンダリパラメーターを指定して、このようにバインドできることもわかりました（なぜこのように書かれたのかわかりません）：

$(document).on("click", ".bar", function() {
    console.log("bar clicked");
})

このfiddleに見られるように、どちらも同じことを行います。

最初のコード サンプルのように、常に要素に直接バインドしますが、問題はありません。

別のバインディング方法を使用する必要があるのはいつですか? また、その利点は何ですか?

4

3 に答える 3

4

2 番目のコード例は、非推奨の now.live()イベントに相当します。そのため、サブスクリプションの時点で DOM にまだ存在しない DOM 要素のイベントをサブスクライブしたい場合に使用します (たとえば、AJAX 呼び出しの後に DOM に追加された要素を考えてください)。

最初の例は と完全に同等$(".foo").click(function() { ... });です。

于 2012-06-24T19:30:32.537 に答える
3 
$(document).on("click", ".bar", function() {
    console.log("bar clicked");
});

これは、非推奨になった.live()メソッドの代わりに、
イベント ハンドラーを要素に直接委譲するためのものです (「移動中に」動的に生成されます)。

ボタンを動的に生成する$('.button').on('click',function(){としましょう - その要素をクリックしても何も起こりません。クリック ハンドラー
を使用すると、現在および将来の要素にアタッチ (委譲) され、クリック可能になります。$('#navigation').on('click','.button',function(){.button

（遅い）どこ$(document)で親要素になることができますか：（$('#your_parent')速い）

于 2012-06-24T19:31:27.053 に答える
3

常に最も近い親要素を使用します。jQuery は、発生するイベントを監視し、イベントが見つかるとすぐにアタッチします。これをイベント委任と呼びます。どちらもデフォルトである場合document、jQuery は、クリックされた要素の最も近い親要素ではなく、それまで待機する必要があります。

最初の例は、イベントをバインドするときにそこに存在するはずの要素に対して機能しますが、後のアプローチは、存在する要素と新しく/動的に作成された要素の両方に対して機能します

于 2012-06-24T19:32:48.703 に答える