要素の後にjQuery関数を追加

Question

誰かがボタン要素を持つHTMLコードを追加してそのボタンを機能させる方法を教えてもらえますか？なぜ私の関数は、追加されたボタンで動作していないのですか？ここで

は私のコードです：

JavaScriptの機能

<div id="attachments"> 
    <input id="add-attachment" type="button" value="Dodaj kolejny &#x271A;" class="button-custom-3"> 
    <div class="hr-custom-1"></div> 
<div> 
    <input type="button" value="Przeglądaj" class="button-custom-1"> 
    <span>Przykładowa nazwa załączonego pliku.jpg</span> 
    <input type="button" value="Usuń &#x2716;" class="button-custom-2 button-remove-attachment"> 
    <div class="hr-custom-1"></div> 
</div> 

<div> 
    <input type="button" value="Przeglądaj" class="button-custom-1"> 
    <span>Przykładowa nazwa załączonego pliku.jpg</span> 
    <input type="button" value="Usuń &#x2716;" class="button-custom-2 button-remove-attachment"> 
    <div class="hr-custom-1"></div> 
</div> 

：

$(".button-remove-attachment").click(function(){ 
    $(this).parent().remove(); 
}); 

$("#add-attachment").click(function(){ 
    var element = $("<div><input type='button' value='Przeglądaj' class='button-custom-1'><span>Przykładowa nazwa załączonego pliku.jpg</span><input type='button' value='Usuń &#x2716;' class='button-custom-2 button-remove-attachment'><div class='hr-custom-1'></div></div>"); 
    $("#attachments").append(element);  
}); 

jsFiddleでそれを確認してください：https://jsfiddle.net/6f9xhr64/

Answer 1

はコード

$(document).on("click",".button-remove-attachment",function(){ 
    $(this).parent().remove(); 
}); 


$(document).on("click","#add-attachment",function(){ 
    var element = $("<div><input type='button' value='Przeglądaj' class='button-custom-1'><span>Przykładowa nazwa załączonego pliku.jpg</span><input type='button' value='Usuń &#x2716;' class='button-custom-2 button-remove-attachment'><div class='hr-custom-1'></div></div>"); 
    $("#attachments").append(element); 

}); 

Answer 2

あなたのボタンがある時点で動的に追加されているので、時間、あなたは3つのパラメータでOn（）メソッドのオーバーロードを使用する必要がありますters。あなたはこの記事を参照してください：Dynamic Html elements