javascript - 访问刚刚使用 jQuery.add() 添加的元素

Question

我目前有一个 javascript 函数，它使用 jQuery .add() 方法将元素添加到 DOM，然后立即尝试访问它(在本例中，通过添加一个类，稍等一下，然后再次删除它)

elem = "<p id="new">added element</p>"
jQuery("body").add(elem)
jQuery("#new").addClass("red")
setTimeout(function(){
    jQuery(".new").removeClass("red")
},1000)

问题是 jQuery 选择器找不到 .new 元素。我发现的类似问题的所有解决方案都涉及在加载元素后将单击/鼠标事件绑定(bind)到元素，这不是我在本例中寻找的。我还研究了 jQuery.add() 的替代方案，但只提出了 jQuery.append() ，这导致了同样的问题。

如果有任何相关性，此代码片段所在的函数位于 jQuery(document).ready() 函数之外。

tl;博士版本:
在使用 jQuery.add() 添加元素后，如何对其进行操作(例如向其添加类)？

Answer 1

你都错了

1. 您的字符串连接未正确转义"
2. 您正在使用id和class选择器错过了(id - # 和类 - . )
3. .add()不用于添加新元素，需要使用.append()

尝试

elem = '<p class="new">added element</p>'
jQuery("body").append(elem)
jQuery(".new").addClass("red")
setTimeout(function(){
    jQuery(".new").removeClass("red")
}, 1000)

演示:Fiddle

我可以把它写成

var elem = $('<p class="new">added element</p>').appendTo('body').addClass('red');
setTimeout(function(){
    elem.removeClass("red")
}, 1000);

演示:Fiddle