通常、 から.live()
への変換.on()
は比較的簡単です。そのための正確なプロセスは、API for に.live()
記載されています。
using の構文.live()
の一般的な形式$(selector).live(event, handler)
は、少し誤解を招く可能性があります。これは、漠然と素晴らしいことが起こり、一致する要素がいつ DOM に追加されたかをたまたま知っているという印象を与えるからです。実際には、ほとんどの人が知っているように、実際にはイベント ハンドラーをドキュメントに委任しています。
これを念頭に置いて、.on()
of:の一般的な形式に変換する方法を簡単に確認できます$(document).on(event, selector, handler)
。
ただし、この変換は、何が何でselector
あるかを知ることにかかっています。質問の例のように、任意の jQuery オブジェクトを取得.live()
してそれを呼び出す場合、どのように using に変換し.on()
ますか?
答えは、どうあるselector
べきかを判断する何らかの方法が必要だということです。幸いなことに、jQuery はすでにそれを行っておりselector
、結果のオブジェクトのプロパティに格納しています。
$obj
したがって、次のようにする代わりに、任意の jQuery オブジェクトを取得します。
$obj.live(event, handler);
代わりに次のようにします。
$(document).on(event, $obj.selector, handler);
プロパティにはいくつかの制限がありselector
ます。主に、関数をチェーンして一致した要素のセットを変更する場合です。たとえば、次のコードを見てください。
var $obj = $('#foo');
console.log($obj.selector); // #foo
console.log($obj.find('a').selector); // #foo a
console.log($obj.children('a').selector); // (an empty string)
.find()
正しく使用すると、セレクターが更新されます。ただし、を使用.children()
すると、代わりに完全に削除されます(なぜこれが得られないの#foo > a
ですか...?)。
したがって、「単純な」jQuery オブジェクト (つまり、セレクターのみを使用して構築されたもの) の場合、上記のアプローチが機能します。
セレクターがわからない場合は、おそらくイベント委譲を自分でシミュレートしてみてください。
$(document).on(event, function(event) {
if($obj.filter($(event.target).parents().andSelf()).length) {
// do your actions here
}
});
これは基本的に、イベントの最初のターゲットまたはその先祖のいずれかが$obj
jQuery オブジェクトの一致する要素のセット内にあるかどうかをチェックし、そうである場合にのみアクションを実行します。
注:selector
プロパティの存在はおそらく API のどこかに文書化されていますが、私はそれを見たことを思い出すことができません。