jquery append()不处理动态添加的元素

考虑HTML

  • Default item
  • Default item

和jQuery代码

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

    问题是,我需要将“x”标记附加到dom的所有新添加元素。

    在这种情况下,只有默认元素附加“x”标记。

    新添加的元素不会附加“x”。

    我相信工作会很简单,但不能正确!

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

    您的代码正在运行,因此它当然只能访问已存在的元素。 添加新列表项的代码稍后会在用户单击某些内容时运行。 你也必须加入这个过程。

    一种方法是挂钩它们是同一个事件,并从事件处理程序运行您的代码。 务必在事件结束后挂钩。

    他们的代码:

     $('button').live('click', function(){ $('ul').append('
  • Added item
  • '); });

    你的代码( 他们之后 ):

     $('button').live('click', markButtons); markButtons(); function markButtons() { $('ul li:not(.marked)') .addClass("marked") .append(' x'); } 

    更新小提琴

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

    如果您担心订单混乱,您可以随时稍微延迟您的代码:

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

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

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

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

    当然,当你追加它时,你也可以把粗体“x”放在

  • ……

    编辑如果您无法更改单击处理程序,那么您唯一可以做的就是轮询DOM,或者尝试像@TJ Crowder建议的那样(我觉得应该可以正常工作)。

    为什么不在最初的追加中做呢?

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

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

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

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

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

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

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

    或这个:

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

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