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

Updated fiddle

我说你的代码需要在代码之后进行连接的原因是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>')
    ); 
});

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

编辑如果您无法更改点击处理程序，那么您唯一可以做的就是轮询DOM，或者尝试类似@ T.J的内容。克劳德建议（我认为应该可以正常工作）。

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);
});

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

我将它放在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 显示两个独立的处理程序。

jquery append（）不处理动态添加的元素

3 个答案: