jquery append()不处理动态添加的元素

Question

考虑HTML

<ul>
    <li>Default item</li>
    <li>Default item</li>
</ul>
<button>Append</button>

和jQuery代码

$('button').live('click', function(){  //This action is done by an external script.
    $('ul').append('<li>Added item</li>'); 
});

$('ul li').append('<b> x</b>'); // This action is done by me

问题是,我需要将"x"标记附加到dom的所有新添加元素.

在这种情况下,只有默认元素附加"x"标记.

新添加的元素不会附加"x".

我相信工作会很简单,但不能正确!

实例 - http://jsfiddle.net/vaakash/LxJ6f/1/

Answer 1

您的代码正在运行,因此它当然只能访问已存在的元素.当用户点击某些内容时,添加新列表项的代码将在稍后运行.你也必须加入这个过程.

一种方法是挂钩它们是同一个事件,并从事件处理程序运行您的代码.务必在事件结束后挂钩.

他们的代码:

$('button').live('click', function(){
    $('ul').append('<li>Added item</li>');
});

你的代码(在他们之后):

$('button').live('click', markButtons);

markButtons();

function markButtons() {
    $('ul li:not(.marked)')
        .addClass("marked")
        .append('<b> x</b>');
}

更新了小提琴

我说你的代码需要在代码之后进行连接的原因是jQuery保证了对事件处理程序的调用顺序:当事件发生时,处理程序按照它们被附加的顺序被调用.通过附加处理程序附加处理程序后,您可以保证在处理程序完成其操作后调用处理程序.

如果您担心订单混乱,您可以随时稍微延迟您的代码:

$('button').live('click', function() {
    setTimeout(markButtons, 0);
});

这样,您的代码可以保证在所有挂起的事件处理程序运行之后click运行.