5

複雑なネストされたフォーム (Ryan Bates のバージョン) が.live()動的に生成された要素の一部に接続され.on()ていますが、Jquery 1.4 から 1.7 へのアップグレードに伴い、このフォームに移行しています。

~22 の変更のうちの 1 つのサンプルを次に示します。

# old version with .live()
$('.options .image').live('click', function(){
    console.log('clicked .options')
})

# new version with .on()
$('.options').on('click', '.image', function(){
    console.log('clicked .options')
})

変更は、既に存在するフォーム要素に対しては完全に機能しますが、後で動的に作成されるネストされた要素に対しては失敗します。したがって、Jquery よりも Jquery のように動作していbindますlive。ここで何が起こっているか知っていますか？

コードが非常に複雑で、多くのパーシャルが含まれているため、ここでは省略します (予感していただければ幸いです!)。ありがとう。

4

3 に答える 3

3

3nigma のコメントによると、元のセレクターで変更すると、これは機能します。

$(document).on('click', '.options .image', function() {
  console.log('clicked .options');
});

ただし、ドキュメントをリスナーとして設定することは、通常はうまくいくとは思いません。元のバージョンでは、ノード内のノード.live()を選択しています。.image.options

しかし、どの部分が動的にロードされるかという質問はありません。それ.optionsも動的に読み込まれるコンテンツの一部だと思います。委任リスナーに使用する場合の最初のセレクター.on()は、破棄されないものである必要があります。

$('#someWrapper').on('click', '.options .image', function() {
  console.log('clicked .options');
});

#someWrapper新しいラッパー要素である必要はありません。破棄されない任意の祖先 (「親」と呼ぶ人もいますが、祖父母や曽祖父母などになる可能性があるため、これは誤称です!) である可能性があります。 . ターゲット セレクター (.options .image) に近いほど良いです。

于 2012-04-09T06:26:37.140 に答える
3

.on()コードが機能するには、要素.optionsが動的に作成されるのではなく、静的である必要があります。の最初のセレクターは.on()、静的な親でなければなりません。.live()以下を使用した場合と同じように機能します。

$(document).on('click', '.options .image', fn);

ただし、オブジェクトよりもオブジェクトに近い静的な親 (作成も破棄もされない親) を選択すると、ページのパフォーマンスが向上しdocumentます。HTML を見せていないので、特定のオブジェクトを推奨することはできませんが、適切な親オブジェクトを選択できると思われます。

于 2012-04-09T06:26:55.150 に答える
0

.on() 以下は、およびの正しい構文です。.live()

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

続きを見る：

on v/s live
on and off

于 2012-04-09T06:26:08.113 に答える