0

ここに私の例を投稿しました

http://jsfiddle.net/abt5w/1/

HTML:

<p class='para'>
<div class='test'>Hello</div>
</p>

JS:

 $('.test').on('click', function(e) {
     alert('clicked');
 });
$('.para').append("<div class='test'>Hello 2</div>");

標準の「Hello」は、マウス クリックに応答します。ただし、「Hello 2」を追加すると、両方が同じコードによってトリガーされるはずですが、そのテキストはマウスのクリックに応答しません。私は何を間違っていますか？

4

3 に答える 3

5

に変更します

$('.para').on("click",".test",function(e) {
     alert('clicked');
 });

委任されたイベントを使用する場合、イベント ハンドラーは親要素にのみアタッチされます。Jquery は、子孫要素のイベント ハンドラーを追加しません。それがもう一つのメリット

セレクターが提供されている場合、イベント ハンドラーは委任されていると見なされます。イベントがバインドされた要素で直接発生した場合、ハンドラーは呼び出されませんが、セレクターに一致する子孫 (内部要素) に対してのみ呼び出されます。jQuery は、イベント ターゲットからハンドラーがアタッチされている要素 (つまり、最も内側の要素から最も外側の要素) までイベントをバブルし、セレクターに一致するそのパスに沿ったすべての要素に対してハンドラーを実行します。

まだ作成されていない子孫要素のイベントを処理する機能に加えて、委譲イベントのもう 1 つの利点は、多数の要素を監視する必要がある場合にオーバーヘッドが大幅に削減される可能性があることです。 1,000 要素まで:

 $("#dataTable tbody tr").on("click", function(event){  
      alert($(this).text()); 
   });

委譲イベント アプローチでは、イベント ハンドラーを 1 つの要素 (tbody) のみにアタッチし、イベントは 1 レベル (クリックされた tr から tbody まで) バブルアップするだけで済みます。

$("#dataTable tbody").on("click", "tr", function(event){  
 alert($(this).text()); 
});

$.onから

documentすべてを監視する必要がある場合に備えて、委任されたイベント ハンドラを.test

$(document).on("click",".test",function(e) {
     alert('clicked');
 });

しかし、ドキュメントが述べているように、イベントはより多くのレベルをバブルアップする必要があります. ドキュメントに添付するか、.para

于 2013-06-16T08:08:51.130 に答える
2

これは、次の関数を使用して、活発な方法でクリック イベントをサブスクライブする必要があるためです。.on()

$('.para').on('click', '.test', function(e) {
     alert('clicked');
});

これで、サブスクライブするために .on 関数を呼び出した時点ではまだ存在していなかった DOM 要素に対しても、jQuery がクリック ハンドラーを実行します。

于 2013-06-16T08:07:48.137 に答える
0

コードを記述した方法で、これは機能します。

 $(document).on('click', 'div.test', function(e) {
     alert('clicked');
 });

ただし、このようにすることもできます。

<div id="container">
    <p class='para'>
        <div class='test'>Hello</div>
    </p>    
</div>

その後;

 $('#container').on('click', 'div.test', function(e) {
     alert('clicked');
 });
$('.para').append("<div class='test'>Hello 2</div>");
于 2013-06-17T10:33:02.623 に答える