0

.on() の使用について少し混乱しています。誰かが次の違いを教えてくれますか?

$('#detailData').on('click', '.select-topic', function() {

と

$('#detailData .select-topic').on('click', function() {
4

4 に答える 4

3

1 つ目は、クリック イベント ハンドラーを要素にデリゲートします。#detailDataクリック イベント (その子孫のいずれかから発生する可能性があります) がその要素に到達すると、jQuery はイベント ターゲットがセレクターと一致するかどうかを確認します.select-topic。存在する場合は、イベント ハンドラーが実行されます。

これは、.select-topic要素が DOM に動的に追加される場合に便利です。まだ存在しない要素にイベント ハンドラを直接バインドすることはできません。

これが可能なのは、ほとんどの DOM イベントが発生元の要素からすべての祖先要素までツリーをバブルアップするためです。

.select-topic2 番目の例では、コードの実行時に DOM に存在するすべての要素にクリック イベント ハンドラーをバインドします。

簡単なデモンストレーションを次に示します。次のマークアップの場合:

<ul id="myList">
    <li class="item">Item 1</li>
    <li class="item">Item 2</li>
</ul>​

次のコードを実行します。

$("#myList .item").on("click", function () {
    $(this).text("Clicked!"); 
});

/*$("#myList").on("click", ".item", function () {
    $(this).text("Clicked!"); 
});*/

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

「項目 3」をクリックしようとしても、何も起こりません。最初の.on()呼び出しをコメントアウトし、2 番目の呼び出しをコメント解除します。もう一度実行し、"Item 3" をクリックしたときにイベント ハンドラーがどのように実行されるかを確認します。

于 2012-08-08T09:05:02.840 に答える
1

1つ目は、動的に作成された要素 ( ).select-topic用です。2つ目は、クリックのリスナーを新しく作成された要素に委任しません。

最初のものは、現在は推奨されていない.live()メソッドのようなものです。

于 2012-08-08T09:04:55.380 に答える
0 
$('#detailData')
.on('click', '.select-topic', function () {

クリック イベント ハンドラを にバインドします#detailData。

$('#detailData .select-topic')
.on('click', function () {

クリックイベントハンドラーをバインドします#detailData .select-topic

于 2012-08-08T09:05:56.717 に答える
0

ドキュメントで説明できます：

.on( events [, selector] [, data], handler(eventObject) )

selectorイベントをトリガーする選択された要素の子孫をフィルタリングするためのセレクター文字列。セレクターが指定されているnullか省略されている場合、イベントは選択された要素に到達したときに常にトリガーされます。

つまり、どちらの場合も、イベントは ID を持つ要素に関連付けられますが、最初のケースでは、一致するセレクターdetailData内のすべての要素に委任されます。'.select-topic'これは、'.select-topic'定義時に が一致していなくても機能します (イベントをその要素にアタッチせず、親要素のみにアタッチするため)。

イベント委任の詳細: http://davidwalsh.name/event-delegate

于 2012-08-08T09:05:59.997 に答える