javascript - 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”标记 append 到所有新添加到 dom 的元素。

在这种情况下，只有默认元素会 append “x”标记。

新添加的元素不 append “x”。

我相信这项工作会很简单，但做不好!!

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

Answer 1

您的代码会立即运行，因此它当然只能访问已经存在的元素。当用户单击某些内容时，添加新列表项的代码将在稍后运行。您还必须连接到该过程。

一种方法是 Hook 相同的事件，并从事件处理程序运行您的代码。确保在他们完成后 Hook 事件。

他们的代码:

$('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>');
}

Updated fiddle

我说你的代码需要在它们的代码之后进行连接的原因是 jQuery 保证调用事件处理程序的顺序:当事件发生时，处理程序按顺序调用他们附在上面。通过在他们 append 他们的处理程序之后 append 您的处理程序，您可以保证在他们的处理程序完成后调用您的处理程序。

如果您担心顺序会混淆，您总是可以稍微延迟您的代码:

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

这样，您的代码就可以保证在所有挂接到 click 的事件处理程序运行后运行。