jQuery関数はappend（）の後に応答しません

Question

私はjQueryを使って各ボックスからアイテムを追加/削除できる一連のdivボックスを作成しています。ボックスに新しい要素を追加した後、その要素にバインドしたクリック機能は応答しません。私のコードはおおよそ次のようになります：

$(".add").click(function() { 
$("#targetbox").append("<span class='remove'>This element was added</span>"); 
}); 

$(".remove").click(function() { 
alert("removing"); 
$(this).remove(); 
}); 

#targetboxにアイテムをあらかじめ入力すると、それらはクリック機能に応答します。関数に応答しない動的に追加された項目だけです。

Answer 1

直接新しく追加要素

$(".add").click(function() { 
    $("#targetbox").append("<span class='remove'>This element was added</span>") 
    .bind("click",function(e) { 
     alert("removing"); 
     $(this).remove(); 
    }); 
}); 

またはいずれかの新しい.remove要素

$(".add").click(function() { 
    $("#targetbox").append("<span class='remove'>This element was added</span>"); 
}); 

$(".remove").live("click", function() { 
    alert("removing"); 
    $(this).remove(); 
}); 

Answer 2

あなたのコードはすべての要素のクリックイベントを処理します現在の$('.remove')です。
まだ存在していない要素は影響を受けません。

.live()または.delegateメソッドを呼び出す必要があります。これらのメソッドは、いつセレクタに一致するすべての要素のイベントを処理します（作成時に関係なく）。例えば

：あなたのコードが実行されると、アイテムがまだ追加されていないので、

$(".remove").live('click', function() { 
    alert("removing"); 
    $(this).remove(); 
}); 

Answer 3

にです。クリックの追加機能で追加した後、新しいブロックに動的に割り当てられるように、クリック解除機能を追加する必要があります。

$(".add").click(function() { 
    $("#targetbox").append("<span class='remove'>This element was added</span>"); 
    // Add code here for .remove click function 
});