Question

代码在这里。

/*Other code irrelevant*/
<div class="form-group col-lg-1"> 
     <input type="button" class="btn btn-default update"  value="Update">
</div> 

/*Other code irrelevant*/
<div class="form-group col-lg-1"> 
     <input type="button" class="btn btn-default update"  value="Update">
</div>

在js文件中，我有这个：

$('.update').click(function() {
    alert("it work");
});

但是，当我点击更新按钮时，只有第一个更新按钮会响应，其余的则不会。

重要提示：加载页面时，只有第一个更新按钮位于html文件上，单击页面上的添加按钮后，会添加其余更新按钮。

所以我希望每个更新按钮，包括加载页面时不在DOM上的按钮，按照我的预期工作，在这种情况下，只需给我一条警告信息。

感谢。

Answer 1

要将事件绑定到执行绑定时不存在的元素，可以使用event delegation and the .on() method。基本思想是将事件绑定到您关注的元素的某个父元素：

$('body').on('click', '.update', function(e) {
  alert("it work")
});

这样做是将click事件处理程序绑定到<body>，对其进行过滤，以便只有从具有类update的后代冒出的事件才会触发它。

Answer 2

试试这个：

$('body').on('click', '.update', function(e){alert("it work")});

问题是加载页面时设置$(selector).click(handler)，然后如果添加其他元素使用相同的选择器，则jquery不会考虑新元素。

要修复它，您可以将处理程序设置为父（静态）元素，然后每次调用事件，然后父接收处理程序并允许在子（动态）元素中执行处理程序。

Answer 3

编辑：实际上.each()无法在动态DOM上运行，我没有正确阅读问题。您肯定希望使用其他用户显示的.on()选择器。这将在每次单击时动态获取页面BODY的DOM（计算添加到BODY的任何内容）。您可以使用以下代码查看它：

$('body').on('click', '.update', function(e) {
        var value = $(this).val();
        alert( 'We just clicked button with value: ' + value );    
});

$('#add').click(function(){

    var appendage = '<br />/*Other code irrelevant*/<br /><div class="form-group col-lg-1"><input type="button" class="btn btn-default update" value="Update X"></div><br />';
    $('.col-lg-1').append(appendage);

});

<强> JSFIDDLE

将函数绑定到页面加载时不在DOM上的元素

3 个答案: