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

Posted 2023-03-11

【中文标题】jquery append() 不适用于动态添加的元素

【英文标题】：jquery append() not working on dynamically added elements

【发布时间】：2012-01-12 16:01:59

【问题描述】：

考虑 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/

【参考方案1】：

您必须在事件处理程序中重复“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”放在右边...

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

【讨论】：

但是“点击”操作不是我做的，它是由我无法编辑的外部脚本完成的。只是我需要为所有新添加的元素添加“x”标记..

好的，我会用我认为唯一的方法来编辑答案。

【参考方案2】：

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

一种方法是挂钩相同的事件，然后从事件处理程序运行您的代码。一定要在他们完成之后 钩住事件。

他们的代码：

$('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 挂钩的事件处理程序都运行后运行。

【参考方案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 显示两个单独的处理程序。

【讨论】：

实际上，另一个脚本（我不是作者）附加了列表项。我的工作是添加“x”标记..

感谢您的尝试，但我无法更改“点击”块..（在评论中提到）所以我无法在点击块中添加“settimeout”！！

@AakashChakravarthy：就像我的回答说的那样，你自己绑定。这并没有改变原来的。这是在原版之外绑定一个新的单独的。

@AakashChakravarthy: Here's an example 显示两个单独的处理程序。