Javascript 删除jQuery添加的按钮

我正在使用jQuery向表单添加额外的选择和文本字段。但是，我希望能够使用删除按钮删除添加的文本字段

一旦添加了字段，jQuery似乎无法检测到它

jQuery

var counter = 2;

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


    var newTextBoxDiv = $(document.createElement('div'))
        .attr("id", 'contact-list-div-' + counter).attr("class", 'contact-list-div');

    newTextBoxDiv.after().html('<select></select>' +
    '<input type="text" name="textbox' + counter +
    '" id="textbox' + counter + '" value="" >' + '<button type="button" class="removeButton" id="removeButton-' + counter + '">Remove Button</button>');

    newTextBoxDiv.appendTo("#contact-list");


    counter++;
});


$(".removeButton").click(function() {
    alert(this.id); //this never shows, only on the element that was 
                    //added directly added using html, in this case removeButton-1
});

var计数器=2；
$（“#添加按钮”）。单击（函数（）{
var newTextBoxDiv=$（document.createElement（'div'））
.attr（“id”，“联系人列表div-”+计数器）.attr（“class”，“联系人列表div”）；
newTextBoxDiv.after（）.html（“”+
“+”移除按钮“）；
newTextBoxDiv.附录（“联系人列表”）；
计数器++；
});
$（“.removeButton”）。单击（函数（）{
alert（this.id）；//这永远不会显示，只会显示在
//使用html直接添加，在本例中为removeButton-1
});

HTML

移除按钮

您需要使用事件-：

在事件监听器注册后，您将内容添加到DOM，以便单击

。removeButton

。因此，在将单击事件绑定到该元素时，该元素不存在

通过事件委派，您可以将事件列表绑定到现有父级（

文档

，在这种情况下，但是

#联系人列表

）上。这将侦听与

.removeButton

-选择器匹配的子体的所有事件

您需要使用事件-：

在事件监听器注册后，您将内容添加到DOM，以便单击

。removeButton

。因此，在将单击事件绑定到该元素时，该元素不存在

通过事件委派，您可以将事件列表绑定到现有父级（

文档

，在这种情况下，但是

#联系人列表

）上。这将侦听与

.removeButton

-选择器匹配的子体的所有事件

---

这是因为您正在将事件绑定到尚不存在的元素

使用jQuery委派在尚未存在的元素上启用处理程序：

$("body").on("click", ".removeButton", function() {
    alert(this.id); 
});

---

这是因为您正在将事件绑定到尚不存在的元素

使用jQuery委派在尚未存在的元素上启用处理程序：

$("body").on("click", ".removeButton", function() {
    alert(this.id); 
});

---

您只能在第一个按钮添加单击侦听器。
尝试使用：

这告诉文档，每当事件在类为“removeButton”的元素上单击occours时，它都应该调用该回调

---

（您可以看到它正在工作）

您仅在第一个按钮添加单击侦听器。
尝试使用：

这告诉文档，每当事件在类为“removeButton”的元素上单击occours时，它都应该调用该回调

---

（您可以看到它正在工作）

因为元素是用jQuery动态添加的，所以jQuery的正常

。单击
事件将无法检测新添加的元素

改用
上的
。请参见下面的示例：

$("body").on("click", ".removeButton", function() {
    alert(this.id); //this never shows, only on the element that was 
                    //added directly added using html, in this case removeButton-1
});

由于元素是通过jQuery动态添加的，因此jQuery的正常
.click
事件将无法检测新添加的元素

改用
上的
。请参见下面的示例：

$("body").on("click", ".removeButton", function() {
    alert(this.id); //this never shows, only on the element that was 
                    //added directly added using html, in this case removeButton-1
});

请添加一个关于事件委派工作原理的小片段。@krillgar我添加了一个小解释请添加一个关于事件委派工作原理的小片段。@krillgar我添加了一个小解释explanation@devqon比我早几秒钟回答实际上不止一个人在我之前回答：）投票赞成，因为对具有
id
的最近的父对象使用事件委派比对具有
id
的最近的父对象使用事件委派比对
body
或
document
的最近的父对象使用事件委派要好，实际上，在我之前有多个回答：）投票通过，因为对具有
id
的最近的父对象使用事件委派更好，而不是
正文
或
文档
。
$(document).delegate(".removeButton", "click", function() {
    alert(this.id);
});

$("body").on("click", ".removeButton", function() {
    alert(this.id); //this never shows, only on the element that was 
                    //added directly added using html, in this case removeButton-1
});