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的事件处理程序运行之后运行。

Answer 2

您必须在事件处理程序中重复“x”代码：

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

当然，当你追加它时，你也可以把粗体“x”放在<li> ......

编辑如果你不能改变点击处理程序，那么你唯一可以做的就是轮询DOM，或者尝试像@TJ Crowder建议的那样（我觉得应该可以正常工作）。

Answer 3

为什么不在初始附加中执行此操作？

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

---

由于听起来您无权访问正在执行追加的脚本，因此您可以绑定自己的处理程序。

$('button').live('click', function(){  //This action is done by an external script.
    setTimeout(function() {
        $('ul li:not(li:has(b))').append('<b> x</b>'); 
    }, 10);
});

这将选择当前没有嵌套b元素的li元素，并且它将附加一个元素。

我将它放在setTimeout因为您可能无法保证处理程序的执行顺序。

如果您更喜欢有效的CSS选择器，请改为：

$('ul li').not($('li b').closest('li')).append('<b> x</b>'); 

或这个：

$('ul li').not(function() { return $(this).find('b').length; }).append('<b> x</b>'); 

---

JSFIDDLE DEMO展示了两个独立的处理程序。