jQuery对动态元素的负载

前端之家收集整理的这篇文章主要介绍了jQuery对动态元素的负载前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图做一些条件操纵的元素动态添加页面上的某个容器,但我缺少一个事件。

说我有一个容器:

<div id="container"></div>

我可以很容易地绑定事件处理程序到所有新元素的点击函数,使用

$('#container').on('click','.sub-element',function() { ... });

但是,当元素添加到#container时,我绑定到什么以获取“一次性”挂钩。我试图绑定到准备和加载无法使用。有没有办法做到这一点,或者我必须提出另一个解决我的问题?

This fiddle contains my non-working example

解决方法

您可以在新添加的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

猜你在找的jQuery相关文章