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

假设我有一个容器：

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

我可以轻松地将事件处理程序绑定到所有新元素的单击函数，使用

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

但是，当元素添加到时，我应该绑定什么才能获得“一次性”钩子#container。我尝试绑定到ready and load无济于事。有什么办法可以做到这一点，还是我必须想出另一种解决方案来解决我的问题？

这个小提琴包含我的非工作示例 http://jsfiddle.net/ggHh7/1/.

您可以在新添加的 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/ http://jsfiddle.net/ggHh7/4/

即使您通过不同的方法加载动态内容，此方法也允许您在全局范围内执行某些操作。

Update

我不确定浏览器支持（我假设 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/ http://jsfiddle.net/ggHh7/7/ ​

UPDATE

为此有一个新的 API：DOMNodeInserted此时已贬值。我还没研究过，但它叫MutationOvserver: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver