jQuery加载动态元素 [英] jQuery on load of dynamic element

问题描述

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

说我有一个容器:

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

我可以使用

轻松地将事件处理程序绑定到所有新元素的click函数.

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

但是当元素添加到#container时，为了获得一次性"钩子，我该绑定什么.我试图绑定到ready和load无济于事.有什么方法可以解决这个问题，还是我必须想出另一种解决方案来解决我的问题?

此小提琴包含了我的无效示例.

解决方案

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

更新

为此有一个新的API，因为此时DOMNodeInserted已弃用.我没有研究过，但是它叫做MutationOvserver: https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver

I'm trying to do some conditional manipulation of elements that are dynamically added to some container on a page, but I'm missing an event.

Say I have a container:

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

I can easily bind an event handler to the click function for all new elements, using

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

But what do I bind to in order to get a "one-time" hook when the element is added to #container. I have tried to bind to ready and load to no avail. Is there any way to do this, or do I have to come up with another solution to my problem?

This fiddle contains my non-working example.

解决方案

You can trigger a custom event on the newly added DOM element that can be picked-up by a jQuery event handler:

//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');

Here is a demo: http://jsfiddle.net/ggHh7/4/

This method allows you to do something globally even if you load the dynamic content through different methods.

Update

I'm not sure of the browser support (I'll assume IE8 and older don't support this) but you can use the DOMNodeInserted mutation event to detect when a DOM element is added:

$('#container').on('DOMNodeInserted', '.sub-element', function(){
    $(this).html('<b>yaay!</b>');
})

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

Here is a demo: http://jsfiddle.net/ggHh7/7/ ​

UPDATE

There is a new API for this as DOMNodeInserted is depreciated at this time. I haven't looked into it but it's called MutationOvserver: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

这篇关于jQuery加载动态元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！