Question

在一个页面上，我有几个div，看起来像这样：

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

我正在尝试使用此代码（简化）将事件绑定到删除按钮：

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

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

当只有一个“产品输入”div时，它可以正常工作。当它们中有更多时，所有删除按钮都会从最后一个产品输入div的隐藏字段中删除值。

https://jsfiddle.net/ryzr40yh/

有人可以帮我找到这个错误吗？

Answer 1

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

    jenkins_user 'test1' do
      full_name   'test user'
      email     'test1@test.com'
      password      'testp' 
    end

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

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

Working Demo

Answer 2

您需要将product和product_field声明为局部变量，现在它们是全局变量。因此，单击处理程序product_field内的任何按钮都将引用最后一个输入元素。

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

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

演示：Fiddle

但是你可以使用点击按钮和输入字段之间的兄弟关系来简化它而不使用如下所示的循环

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

演示：Fiddle

如何在循环中核心绑定事件

2 个答案:

Working Demo