jQuery加载动态元素

时间:2012-03-07 22:41:19

标签: jquery jquery-1.7

我正在尝试对动态添加到页面上某个容器的元素进行一些条件操作,但我错过了一个事件。

说我有一个容器:

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

我可以使用

轻松地将事件处理程序绑定到所有新元素的click函数
$('#container').on('click', '.sub-element', function() { ... });

但是当元素添加到#container时,为了获得“一次性”钩子,我该绑定什么呢?我试图绑定到readyload无济于事。有没有办法做到这一点,或者我是否必须为我的问题提出另一种解决方案?

This fiddle contains my non-working example

2 个答案:

答案 0 :(得分:36)

您可以在新添加的DOM元素上触发自定义事件,该事件可以由jQuery事件处理程序拾取:

//bind to our custom event for the `.sub-element` elements
$('#container').on('custom-update', '.sub-element', 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', '.sub-element', function(){
    $(this).html('<b>yaay!</b>');
})

$('#container').append('<div class="sub-element">No worky!</div>');

以下是演示:http://jsfiddle.net/ggHh7/7/

更新

由于DOMNodeInserted目前已被折旧,因此有一个新的API。我没有调查它,但它被称为MutationOvserverhttps://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

答案 1 :(得分:8)

阅读完上述答案后,我现在成功使用了这个:

$('body').on({
   DOMNodeInserted : function(){
      alert('I have been added dynamically');
   },
   click : function(){
      alert('I was clicked');
   },
   '.dynamicElements'
});

现在我的所有dynamicElements都可以使用精彩的.on()事件地图加载内容。