jquery - JQuery で追加された要素とやり取りできない

Question

私にはDIV要素があります。

<div id="testButton"> Test Button </div>

それをクリックすると、別の要素が別の要素に追加されDIVます

$("#testButton").click(function() {

$("#testDiv").append('<div id="test">Test</div>');

});

Clickここで、追加された要素で最初の要素を非表示にしたいと考えています。

$("#test").click(function() {

$("#testButton").hide();
});

しかし、それはうまくいきません...

Answer 1

イベントハンドラーをアタッチする瞬間に要素が存在しない限り、機能しません。

代わりにこのソリューションを使用できます。

$(document).on('click', '#test', function() {
    $("#testButton").hide();
});

または、ページにすでに特定のブロックがある場合は、次のようなより具体的なセレクターを使用できます

$('#testDiv').on('click', '#test', function() {
    $("#testButton").hide();
});