追加后访问元素答案

【问题标题】：Access Elements After Append追加后访问元素
【发布时间】：2011-08-21 16:13:25
【问题描述】：

我需要在 JQuery 追加后访问 DOM 元素。假设我有这个：

<ul id="items">
    <li class="item">one</li>
    <li class="item">two</li>
</ul>

然后是Javascript：

var addItems = function(html) {
    $('#items').append(html);
    //How do I access the new items here?
}

假设html是：

<li class="item">three</li>
<li class="item">four</li>

我需要对这两个新项目做点什么。这包括将事件绑定到它们。所以我不能简单地使用 $('.item') 因为这会给现有项目添加双重事件。一旦新项目成为 DOM 的一部分，它们与现有项目就没有什么区别了。

最好的方法是什么？

【问题讨论】：

【解决方案1】：

在追加之前制作一个 html 的 jQuery 集合：

var addItems = function(html) {
    var $items = $(html);
    $('#items').append($items);
    $items.foo();
}

【讨论】：

【解决方案2】：

这是一个工作示例：http://jsfiddle.net/hunter/7UTA2/

var addItems = function(html) {
    var $html = $(html);
    $('#items').append($html);
    $html.text("test");
}

这表明您仍然可以操作项目的文本（或任何属性），因为您仍然拥有对集合的引用。

【讨论】：