.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必须是唯一的,特别是因为当您尝试与这些元素进行交互时,它会导致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