jqueryのDOM変異

Question

私はこれ作った：.bがアラートを活性化しないのはなぜ

<span class="a">test 1</span><div></div> 

を？

$(".a").click(function() { 
$('div').html('<span class="b">test 2</span>'); 
}); 

$(".b").click(function() { 
alert("Hello"); 
}); 

DOMの突然変異の検出方法はわかりません。

Answer 1

セレクタは実行時に実行されます。これは、domを追加した後ではなく、ページが読み込まれたときにすでに.bが検索されていることを意味します。

あなたが右の要素を付加した後、それを定義した場合、セレクタはラインで実行する方法を示すために、コードが動作する：

$(".a").click(function() { 
 
    $('div').html('<span class="b">test 2</span>'); 
 
    $(".b").click(function() { 
 
    alert("Hello"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="a">test 1</span><div></div>

しかし、これを行うための正しい方法は次のようになり親ベースのセレクタを定義します。以下は、.bセレクタのtargetをフィルタリングする親にclickイベントを設定することです。 .b以来

$(".a").click(function() { 
 
    $('div').html('<span class="b">test 2</span>'); 
 
}); 
 

 
$(document.body).on("click", ".b", function() { 
 
    alert("Hello"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="a">test 1</span><div></div>

Answer 2

クエリが行われた後に作成されます。スクリプトで$(".b")を呼び出すと何も見つからず、clickイベントはそれに関連付けられていません。あなたはそうのような文書にイベントを取り付けることによって、それを解決することができます。

$(document).on("click", ".b", function() { 
    alert("hello"); 
}); 

Answer 3

あなたが使用している結合click()は、すでに存在する要素にハンドラをアタッチれる「直接」結合と呼ばれています。これは、将来作成される要素に束縛されません。これを行うには、on()を使用して「委任」バインドを作成する必要があります。

$('div').on("click", ".b", function() { 
    alert("hello"); 
});