javascript - .on 或 .click 函数仅对同名表单元素有效一次

Question

我在 php 循环中有一个表单，如果数据库中有 3 个元素，则有 3 个同名表单。这些表单确实包含一个同名的按钮。所以一切都像这样:

<form id="test">
  <button id="testbutton"></button>
</form>
<form id="test">
  <button id="testbutton"></button>
</form>
<form id="test">
  <button id="testbutton"></button>
</form>

当我尝试从 javascript 调用 .on 或 .click 函数时，会出现此问题。它只能工作一次。

这是 JS 代码:

$(document).ready(function () {
    $('#testbutton').on("click", function() {
        function();
    });
});

该按钮淡出某些具有不同名称的 div。

Answer 1

ID's Must Be Unique ，特别是因为它会导致 JavaScript 出现问题当您尝试与这些元素交互时，还可以使用 CSS。

给你的元素一个类:

<form>
  <button class="testbutton"></button>
</form>
<form>
  <button class="testbutton"></button>
</form>
<form>
  <button class="testbutton"></button>
</form>

现在您的选择器可以使用该类:

$('form').on("click", ".testbutton", function(){    // event will bubble up to form