页面加载时将函数绑定到不在DOM上的元素
[英]Bind function to elements that are not on DOM when page loaded
问题描述
代码在这里。
/*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上的按钮）都能按预期工作，在这种情况下，请给我一条警报消息。
谢谢。
3 个解决方案
解决方案1
2 已采纳 2014-04-14 19:41:54
要将事件绑定到绑定时不存在的元素，可以使用事件委托和.on()方法 。 基本思想是将事件绑定到您关注的元素的某些父元素：
$('body').on('click', '.update', function(e) {
alert("it work")
});
这样做是将click事件处理程序绑定到<body> ，对其进行过滤，以便只有从具有类update后代冒泡的事件才会触发它。
解决方案2
0 2014-04-14 19:37:45
尝试这个：
$('body').on('click', '.update', function(e){alert("it work")});
问题是在加载页面时设置了$(selector).click(handler) ，然后，如果使用相同的选择器添加其他元素，则jquery不会考虑新元素。
要解决此问题，可以将处理程序设置为父（静态）元素，然后在每次调用事件时，父控件接收该处理程序，并允许在子（动态）元素中执行该处理程序。
解决方案3
0 2014-04-14 19:52:31
编辑：实际上.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);
});
重定向到URL，然后在“ DOM就绪”时在该新加载的页面的上下文中运行函数
[英]Redirect to a URL and then run a function in the context of that newly loaded page when “DOM Ready”
在页面上加载样式表（不仅是DOM）时触发的事件
[英]Event which triggers when stylesheets, not only the DOM, are loaded on the page
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.