Question

有人可以告诉我如何附加包含按钮元素的HTML代码并使该按钮正常工作吗？为什么我的函数不能处理附加按钮？

这是我的代码：

<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>

JavaScript函数：

$(".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

由于您的按钮是在某个时间点动态添加的，因此您必须使用On（）方法重载三个参数。你应该参考这篇文章：Dynamic Html elements

Answer 2

尝试使用以下代码

$(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);

});

追加元素后的jQuery函数

2 个答案: