我试图对动态添加到页面上某个容器的元素进行一些有条件的处理，但我错过了一个事件。加载动态元素的jQuery

说我有一个容器：

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

我可以很容易地绑定一个事件处理程序为所有新元素的点击功能，使用

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

可是我该怎么绑定，以便当元素被添加到#container时，获得“一次性”钩子。我试图绑定到ready和load无济于事。有没有办法做到这一点，或者我必须想出解决我的问题的另一种解决方案？

This fiddle contains my non-working example。

来源

2012-03-07 Klaus Byskov Pedersen

*在所有浏览器中，加载事件不会冒泡。在Internet Explorer 8及更低版本中，粘贴和重置事件不会冒泡。这些事件不支持与委派一起使用，但可以在事件处理程序直接附加到生成事件的元素时使用。*（http://api.jquery.com/on/）现在，关于如何解决这个问题... – Corbin 2012-03-07 22:52:14

这是一个问题，以消除'负载'功能，你正试图完成所有的一切，而是操作后，项目已附加'链'的HTML？ $（'＃container'）。append（'

No worky!

'）.html（'yaay！'）; – Ohgodwhy 2012-03-07 22:52:24

@Ohgodwhy不是我无法想出一个解决方法（对于这个愚蠢的例子更是如此），我只想知道是否有一个我错过的事件可以用于我的目的描述。 – 2012-03-07 22:55:37

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

UPDATE

有一个新的API THI s为DOMNodeInserted此时折旧。我还没有看过，但它被称为MutationOvserver：https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

来源

2012-03-07 22:55:18 Jasper

有趣的，+1和所有......所以你说的是，当某些第三方plugIn将某个元素添加到某个容器时，我无法收到通知。如果我不是那个追加它的人，我会被搞砸吗？ – 2012-03-07 22:58:26

您可以设置一个间隔，每隔一段时间检查一次新的DOM元素。否则有突变事件，'DOMNodeInserted'可能是你想要什么，但浏览器的支持可能不是你所需要的：https://developer.mozilla.org/en/DOM_Client_Object_Cross-Reference/DOM_Events（看'变异和突变名称事件类型“部分）。有关使用DOMNodeInserted的示例，请参阅我的**更新**。 – Jasper 2012-03-07 23:00:46

你需要使用一个方法，如长轮询监视长度变化的元素，如果长度的更改，然后抢在长度上的差异。这会给你任何'对象'驻留在那里。这是非常规的，但它会起作用。 – Ohgodwhy 2012-03-07 23:04:30

看完上面的回答后，我现在已经成功地使用此：

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

现在，当他们加载的所有我dynamicElements可以做的东西，利用真棒.on()事件地图。

来源

2013-03-03 01:16:47 tim

加载动态元素的jQuery

回答

更新

UPDATE

相关问题