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

Bind function to elements that are not on DOM when page loaded

本文关键字：DOM 元素 加载 绑定 函数      更新时间：2023-09-26

代码在这里。

/*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上的按钮，都能像我预期的那样工作，在这种情况下，只需给我一条警告消息。

谢谢。

要将事件绑定到执行绑定时不存在的元素，可以使用事件委派和.on()方法。基本思想是将事件绑定到您关心的元素的某个父元素：

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

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

试试这个：

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

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

要解决此问题，您可以将处理程序设置为父（静态）元素，然后每次调用事件时，父都会接收处理程序，并允许在子（动态）元素中执行处理程序。

Edit：实际上.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

相关文章：