javascript - 将 JavaScript 变量作为值注入(inject)匿名函数中

Question

我有一个可以动态添加输入的表单。当我添加新输入时，我会增加全局 id变量并将其连接到输入的 id，以便它是唯一的。我还为每个输入创建一个删除按钮，该按钮应该删除该输入及其本身(通过删除它们所在的容器 <div> )。我通过 JQuery 将匿名函数添加到删除按钮的点击事件来执行删除过程:

$('#deletebutton' + id).click(function(){
    $('#inputcontainer' + id).remove();
});

这个解决方案的唯一问题是它不能按照我排除的方式工作。当我单击任何删除按钮时，它将删除最后一个输入容器，因为当我单击时，它会执行匿名函数并评估 id当时的变量，因此所选的 id 将是最后一个输入的 id。所以最后一个输入容器总是会被删除。

有没有办法重写此函数，以便当我将其添加到单击事件时，它将评估 id ，注入(inject)它并处理选择，就好像它已经写成 #inputcontainer1 , #inputcontainer2等

我可以通过将函数的主体添加到按钮的 onclick() 来实现此目的事件:

var newbutton = '<button id="deletebutton' + id + '" type="button" onclick="javascript:$(\'#inputcontainer' + id + '\').remove();">x</button>';

但是有没有办法用 JQuery 做到这一点 click()方式？

Answer 1

要回答特定问题，您必须从 DOM 中挖掘 id:

$('#deletebutton' + id).click(function(){
    var id = $(this).attr("id").replace('deletebutton','');
    $('#inputcontainer' + id).remove();
});

您还可以在创建删除按钮时将其存储为数据:

<button data-id="1" id="deletebutton1">

$('#deletebutton' + id).click(function(){
    var id = $(this).data("id");
    $('#inputcontainer' + id).remove();
});

请注意，在这两种情况下，id 都是字符串，而不是整数。