0

あなたが電話するので、私は？$('mySelector').on('myEvent', 'mySecondSelector'),の使用法を理解していません。"mySecondSelector"

4

4 に答える 4

4

2番目のセレクターはターゲットです。この構文によりon()、コードの実行時にターゲットが存在しない可能性がある場合に、委任メソッドとして使用できます。

このマークアップを想定する

<ul id="list">
    <li class="item">Item</li>
</ul>

itemクラスにクリックハンドラーを追加できます。

$('.item').on('click',doSomething);

しかし、リストに新しいアイテムを追加すると、

$('#list').append(' <li class="item">Item</li>');

この新しいアイテムは、クリックハンドラーが呼び出されたときには存在しなかったため、イベントハンドラーがバインドされません。

代わりに、メインのulまたはその他の永続的な祖先をdocumentレベルまで使用します。これは、常に存在し、アイテムをターゲットにしているためです。

$('#list').on('click', '.item', doSomething);

これを次のように解釈し ます。クリックするときに#list、クリックのターゲットがである場合は.item、ハンドラーを実行します。それ以外の場合は、何もしません。

于 2012-11-24T14:20:08.893 に答える
1

jQuery 1.7xでは、.on()メソッドが追加されました。

あなたの質問に答えるために、私は最初にこれが追加された理由を説明する必要があります。.live()以前は、セレクターに一致する要素についてDOMを常に監視するようなメソッドがありました（そしてまだあなたは非難されています） 。したがって、すべてのDOMの変更（挿入、再配置、削除など）で、リスナーはアクティブになり、デリゲートをアタッチするために何が必要かを確認しようとします。

コンテナと数千の子要素を持つページを想像してみてください。これで、子要素は変化し続け（主にAjaxが原因）、.click()すべての子要素にイベントをバインドする必要があります。これは、以前は多くの処理を消費し、パフォーマンスがかなり低下していました。

メソッドを入力し.on()ます。基本的に、2つのセレクターは次の目的で使用されます。

最初のセレクター-DOMがロードされた後に変更parentされるべきではない要素

2番目のセレクターchild-DOMがロードされた後でも、最初のセレクターから出入りする可能性のある、作成しているメソッドの実際のターゲットである要素。

広く使用するために、多くの人は次のように `.on（）'を使用します

$(body).on("click", "#mydiv", function(){
    // do something
});

DOMは通常それほど大きくないため、これは通常は問題ありません。ただし、これは次のようになります。DOMbody内の要素を監視し、その中のすべての要素を探すようにjQueryに指示#mydivします。何千もの子要素が操作されている場合、以前の方法と大差ありません。

したがって、使用するとき.on()は、最初のセレクターを2番目のセレクター要素を含むものにし、DOMの上位にはしないようにしてください。

于 2012-11-24T14:29:35.553 に答える
1

複数の子要素を含む要素がある場合、2番目のセレクターを指定しないと、クリックした子要素に関係なくイベントがトリガーされます。これを指定すると、そのセレクターで選択した要素をクリックした場合にのみイベントが発生します。

たとえば、次のようになります。

<div id="clickable">
    <div id="fireEvent">Example</div>
    <div id="dontFireEvent">Example</div>
    <div id="fireEvent"></div>
</div>

これで、電話をかけると$('#clickable').on('myEvent');、エリアのどこをクリックしてもイベントが発生します。

ただし、呼び出す場合は$('#clickable').on('myEvent','#fireEvent');、最初と3番目のdiv（IDが「fireEvent」のdiv）をクリックした場合にのみイベントが発生します。

于 2012-11-24T14:23:03.553 に答える
0 
$('mySelector').on('myEvent', 'mySecondSelector')

mySecondSelector：

ハンドラーを呼び出す選択された要素の子孫をフィルタリングするためのセレクター文字列。セレクターがnullまたは省略されている場合、ハンドラーは、選択された要素に到達したときに常に呼び出されます。

詳細については、On（）を参照してください

于 2012-11-24T14:16:13.467 に答える