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插件的种类 1、封装对象方法 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进...
扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。 入门 编写一个jQuery插件开始于给...
最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js。 兼容性如图: ht...
一、什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异...
AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一...