Javascript 如何在循环中正确绑定事件

在一个页面上，我有两个div，如下所示：

<div class="product-input">
    <input type="hidden" class="hidden-input">
    <input type="text">
    <button class="remove">X</button>
</div>

当只有一个“product input”div时，它可以很好地工作。当有多个“product input”div时，所有移除按钮都会从上一个product input div的隐藏字段中移除值

---

有人能帮我找到bug吗？

您需要将

product

和

product\u字段

声明为局部变量，现在它们是全局变量。因此，在click handler

product\u字段中单击的任何按钮都将引用最后一个输入元素

$('.product-input').each(function() {
    var product = $(this);
    var product_field = product.find('.hidden-input');

    product.on('click', '.remove', function(event) {
        product_field.val(null);
    });
});

演示：


但是，您可以使用单击的按钮和输入字段之间的同级关系来简化它，而无需使用如下循环

$('.product-input .remove').click(function () {
    $(this).siblings('.hidden-input').val('')
})

演示：
绑定同一事件不需要迭代元素。您可以一次将事件绑定到所有事件：

$('.product-input').on('click', '.remove', function(event) {
   $(this).prevAll('.hidden-input').val("");
});

如果未动态添加“删除”按钮，则不需要事件委派：

$('.remove').click(function(event) {
  $(this).prevAll('.hidden-input').val("");
});


$('.remove').click(function(event) {
  $(this).prevAll('.hidden-input').val("");
});