jquery append() 不适用于动态添加的元素

考虑 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/ http://jsfiddle.net/vaakash/LxJ6f/1/

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

一种方法是挂钩它们相同的事件，并从事件处理程序运行代码。一定要hook事件after他们是这样。

他们的代码：

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

你的代码（after他们的）：

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

markButtons();

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

更新了小提琴 http://jsfiddle.net/LxJ6f/2/

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

如果您担心顺序会混淆，您可以随时稍微延迟代码：

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

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