如何编写一个JavaScript函数，将一个按钮添加到DOM..，当点击时调用相同的函数

Question

我正在尝试编写一个JavaScript/jQuery函数，当一个按钮与类"add-row"点击。该函数将HTML附加到DOM中，从而添加另一个具有相同类的按钮。我想要的是，当第二个按钮被单击时，该函数将被再次调用，并创建另一个按钮，等等。

下面是第一个按钮的代码:

<div>
<label for="add_row-0"></label><br>
<button type="button" class="add-row">Add Another Item</button>
</div>

下面是JavaScript函数:

$(document).ready(function(){
$(".add-row").click(function(){

$(".add-row").last().after(
`<div>
<label for=${button_identifier}></label><br>
<button type="button" class="add-row">Add Another Item</button>
</div>
</div>`
);

});
});

这不是工作-发生的事情是，第一个按钮工作正常，并调用创建第二个按钮的函数，但点击第二个按钮什么也不做。

Answer 1

在所有带有按钮的<div>容器的最近的静态祖先上使用事件委托。

$(document).on('click', '.add-row', function(){
// code here
});

这里以document为例，但您应该将其替换为最近的静态祖先以获得更好的性能。

Answer 2

你有两件事要说

1- .click()函数对dom上新添加的(注入的)元素不起作用，它只对加载页面的渲染元素起作用。

2-为了让您的click函数在新添加的元素上工作，您需要使用.on("click")函数，这样您就可以监听文档中的click。=在

$(document).on(click, ".your-selector", function(){
// your code here
});

所以你的代码应该像

$(document).ready(function () {
$(document).on(click, ".add-row", function () {
$(".add-row")
.last()
.after(
`<div>
<label for=${button_identifier}></label>
<br>
<button type="button" class="add-row">Add Another Item</button>
</div>`
);
});
});