3

私はjQueryにかなり慣れていません。私はli作成され、に追加されていulます。その中に、クリックするとからそれを削除するボタンが含まliれています。基本的：divliul

<ul class="imageList">
  <li>Image</li>
  <li>Image1<div class="deleteImg"></div></li>
</ul>

.on('click')次のようにイベントを委任すると、私の作品は次のようになります。

$('.imageList').on('click','.deleteImg', function() {
        $(this).parent().remove();
    });

しかし、divからすぐに起動した場合はそうではありません:

$('.deleteImg').on('click', function() {
        $(this).parent().remove();
    });

誰かが理由を説明してもらえますか? jQuery API を読みましたが、まだ少し混乱しています。イベントを委任する方が効率的であることは理解していますが、両方とも機能するべきではありませんか?

4

4 に答える 4

1

「li が作成され、ul に追加されました。」

これが委任でのみ機能する理由は、イベント登録が行われた後に要素が技術的に存在するためです。その結果、指定されたセレクターのすべての新しいインスタンスにアタッチするために、イベントを委任する必要があります。

人々がとる別のルートは、追加する前に要素が動的に作成されるときに、イベントを直接追加することです。

例えば：

var $d = $("<div>Hello</div>");
$d.click(function(){ alert("Hello"); });
于 2013-05-15T18:15:20.360 に答える
1

委任されたイベントには、後でドキュメントに追加される子孫要素からのイベントを処理できるという利点があります。

http://api.jquery.com/on/

要素を動的に追加しているので、このようなイベントを委任する必要があります-

$('.imageList').on('click','.deleteImg', function() {
        $(this).parent().remove();
});

これは、これを実行しているときにDOMに存在する要素にイベントを添付するだけです-

$('.deleteImg').on('click', function() {
        $(this).parent().remove();
});
于 2013-05-15T18:15:49.433 に答える
0

これは.deleteImg、ページ読み込み時に存在しないが存在する場合に当てはまります.imageList。

クリック イベントは のすべての祖先要素にバブルアップするため、この場合.deleteImg、ページの読み込み時に存在する祖先の 1 つにそのイベントのリスナーを割り当てることができます。.imageList1子孫.deleteImgがクリックされると、祖先にアタッチされたリスナーがイベントを検出し、 で指定した無名関数を実行します.on()。

于 2013-05-15T18:16:15.417 に答える
0

このようなことをするとき：

$(SOME_SELECTOR).on(...

その時点でセレクターに一致するすべての要素にハンドラーがアタッチされます。後で作成された要素には、ハンドラーが自動的にアタッチされません。

于 2013-05-15T18:16:01.347 に答える