34

昔は、呼び出しを連鎖させlive()て大成功を収めていました。

$(".something")
    .live("click", function(e) { ... })
    .live("change", function(e) { ... })
    .live("submit", function(e) { ... });

最近ではlive()、bind()とdelegate()はピカピカの新しい に取って代わられましたon()。

私は単純に置き換えてみましたがlive()、on()これは明らかだと思われます：

$(".something")
    .on("click", function(e) { ... })
    .on("change", function(e) { ... })
    .on("submit", function(e) { ... });

ただし、どのように機能するかを考えると、これが機能しないことはほぼ明らかですon()。これはhttp://api.jquery.com/on/から:

「イベント ハンドラーは、現在選択されている要素にのみバインドされます。コードが .on() を呼び出す時点で、イベント ハンドラーはページ上に存在する必要があります。」

jQuery のドキュメントによると、ライブ イベントを処理するには、バインドしdocumentて委任する必要があります。.something残念ながら、これは、.document上記のものを複製したい場合、デリゲート セレクター ( ) を繰り返すことになることを意味しon()ます。

$(document)
    .on("click", ".something", function(e) { ... })
    .on("change", ".something", function(e) { ... })
    .on("submit", ".something", function(e) { ... });

これは期待どおりに機能しますが、 を使用するように、より明確に連鎖できるようになりたいと思っていますlive()。何か不足していますか？

4

3 に答える 3

87

私はあなたがこれを行うことができると信じています:

$(document).on({
    "click" : function(e) { ... },
    "change" : function(e) { ... },
    "submit" : function(e) { ... }
}, ".something");

つまり、「events-map」構文を使用してイベントとそのハンドラーを指定してから、デリゲート スタイルの動作に使用するセレクターを指定します。

于 2012-08-08T02:32:11.913 に答える
0

.live()たくさんの問題があります。それらの 1 つは、コードを実行したときにセレクターを評価していたが".something"、結果を使用せず (無駄など)、イベントが発生したときに実行時に再評価していたことです (適切に動作するために必要なように)。

さらに、動的イベント ハンドラーが多数ある場合.live()、すべての動的イベントを強制的にdocumentオブジェクトに配置することで、イベント処理が非常に遅くなる可能性がありました。 .on()一方、実際のオブジェクトに非常に近い静的な親を選択し、そのオブジェクトにイベント ハンドラーをアタッチして、さまざまな動的イベント ハンドラーをソースの近くとさまざまなオブジェクトの両方にアタッチして、実行時のパフォーマンスを向上させることができます。多くのイベント ハンドラーがある場合は、はるかに優れています。

.on()したがって、はるかに効率的であるため、機能する新しい方法で生活する必要があります。現在使用しているのと同じフォームを使用する場合、動的セレクターをもう少し再入力する必要があることは大したことではありません。または、マップを最初のパラメーターとして渡し、.on()複数のイベントを 1 つのイベントで処理することもできます。.on()呼び出します。.on()詳細については、jQuery ドキュメントのの 2 番目の形式を参照して.on()ください。

ここでは、動的な動作に使用する簡単な説明を示します。.on()

于 2012-08-08T02:25:51.077 に答える
0

あなたの質問を理解しているので、あなたはlive(). を使用on()すると、もう少し書く必要がありますが、.something動的に追加されている場合は、イベントを委任する別のオプションがあります。

var $div = $('<div/>', {
  'class': 'something',
   click: function () { ... },
   change: function () { ... }
})

// Already has events attached
// no need to delegate
$div.appendTo('body')
于 2012-08-08T02:34:10.430 に答える