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显示了两个独立的处理程序。