1

jQueryの.on()イベントハンドラーを使用していますが、を使用した場合にのみ機能します$(document)。

これは機能します：

$(function() {
    $(document).on("click", ".search .remove", function(e) {
        console.log("clicked");
    });
});

これは動作しません：

$(function() {
    $(".search .remove").on("click", function(e) {
        console.log("clicked");
    });
});

その2番目のものでは何も起こりません...エラーなどはありません。発火しません。

4

3 に答える 3

3

.onの2つの異なる構文を使用しており、2つの非常に異なる結果が得られます。

あなたの最初は：

$(context).on("event","targetselector",handler)

これにより、イベントがコンテキストにバインドされ、で選択できるを持っているにevent到達するタイプのイベントは、コンテキストとしてでハンドラーをトリガーします。これは一般にイベント委任として知られています。contexte.targettargetselectore.target

2番目の構文は

$(targetselector).on("event",handler)

この場合、イベントは、targetselector将来の要素ではなく、現在ページ上で一致する要素に直接バインドされます。これは基本的に古いものと同じ.bindです。

于 2012-10-17T14:41:35.417 に答える
2

要素は動的に作成されるため、2番目の例は機能しません。動的に挿入された要素で使用.on()する場合は、動的に挿入されていない要素、つまり読み込み時にページに存在する要素を介してバインドする必要があります。

祖先要素として引き続き使用できdocumentますが、パフォーマンスの観点から、DOM内で。に近い要素を見つけたい場合があります".search .remove"。

上のjQueryドキュメントから.on()：

イベントハンドラーは、現在選択されている要素にのみバインドされます。これらは、コードが.on（）を呼び出すときにページに存在している必要があります。要素が存在し、選択できることを確認するには、ページのHTMLマークアップにある要素のドキュメントレディハンドラー内でイベントバインディングを実行します。新しいHTMLがページに挿入されている場合は、要素を選択し、新しいHTMLがページに配置された後にイベントハンドラーをアタッチします。または、次に説明するように、委任されたイベントを使用してイベントハンドラーをアタッチします。委任されたイベントには、後でドキュメントに追加される子孫要素からのイベントを処理できるという利点があります。委任されたイベントハンドラーがアタッチされたときに存在することが保証されている要素を選択することにより、委任されたイベントを使用して、イベントハンドラーを頻繁にアタッチおよび削除する必要をなくすことができます。この要素は、たとえば、Model-View-Controllerデザインのビューのコンテナー要素、またはイベントハンドラーがドキュメント内のすべてのバブリングイベントを監視する場合はドキュメントにすることができます。document要素は、他のHTMLをロードする前にドキュメントの先頭で使用できるため、ドキュメントの準備が整うのを待たずに、そこにイベントを添付しても安全です。

于 2012-10-17T14:39:33.647 に答える
1

最初のメソッドはon()、非推奨のメソッドと同等ですlive()。おそらく、ページの読み込みが完了した後、要素が動的に挿入されます。

次のようにコードを書き直すことができ、それは機能するはずです：

$(function() {
    $(".search").on("click", ".remove", function(e) {
        console.log("clicked");
    });
});
于 2012-10-17T14:41:29.813 に答える