5

DOM に複製/挿入した要素でイベントをトリガーできません。

ここでフィドルを確認してください。

HTML:

<div class="A">[THIS IS DIV A]</div>
<div class="B">CLICK TO CLONE DIV A</div>

jQuery:

$('.A').on("click",null,function() {    
    alert('DIV A CLICK');           
});

$('.B').on("click",null,function() {        
    $('.A').clone().insertAfter('.A');          
});

クローンをクリックしてDIV Aも、何も起こりません。

複製された要素でイベントをトリガーするにはどうすればよいですか?

4

1 に答える 1

7

私が提案する解決策は2つあります。

まず、この場合のより良いオプションは、true引数をに追加するclone()ことです。たとえば、この場合は次のようになります。

$('.A').clone(true).insertAfter('.A');

の最初の引数は次をclone()表します:

"イベント ハンドラーとデータを要素と共にコピーする必要があるかどうかを示すブール値。既定値は false です。" - clone() の jQuery API セクション。

これは、バインドされたすべてのイベントが、複製された各要素に保持されることを意味します。

ここでjsFiddle。

2 番目のオプションは、おそらくこの例には適していませんが、on()のイベント委任機能を使用することです。

「委任されたイベントには、後でドキュメントに追加される子孫要素からのイベントを処理できるという利点があります。」- on() の jQuery API セクション。

この場合：

$(document).on("click", ".A", function() { ...

これで、クラス.Aを持つすべての新しい要素に、このクリック イベントが付加されます。複製された要素も含まれます。

ここでjsFiddle。

于 2013-05-08T23:56:37.293 に答える