我试图做一些条件操纵的元素动态添加到页面上的某个容器,但我缺少一个事件。
说我有一个容器:
<div id="container"></div>
我可以很容易地绑定事件处理程序到所有新元素的点击函数,使用
$('#container').on('click','.sub-element',function() { ... });
但是,当元素添加到#container时,我绑定到什么以获取“一次性”挂钩。我试图绑定到准备和加载无法使用。有没有办法做到这一点,或者我必须提出另一个解决我的问题?
解决方法
您可以在新添加的DOM元素上触发自定义事件,该事件可以由jQuery事件处理程序提取:
//bind to our custom event for the `.sub-element` elements $('#container').on('custom-update',function(){ $(this).html('<b>yaay!</b>'); }); //append a new element to the container,//then select it,based on the knowledge that it is the last child of the container element,//and then trigger our custom event on the element $('#container').append('<div class="sub-element">No worky!</div>').children().last().trigger('custom-update');
这里是一个演示:http://jsfiddle.net/ggHh7/4/
此方法允许您在全球执行某项操作,即使您通过不同的方法加载动态内容。
更新
我不确定浏览器支持(我会认为IE8和较旧的不支持这一点),但你可以使用DOMNodeInserted突变事件来检测何时添加一个DOM元素:
$('#container').on('DOMNodeInserted',function(){ $(this).html('<b>yaay!</b>'); }) $('#container').append('<div class="sub-element">No worky!</div>');
这里是一个演示:http://jsfiddle.net/ggHh7/7/
更新
有一个新的API为此DOMNodeInserted此时折旧。我没有看过它,但它的名字MutationOvserver:https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver