Access Elements After Append

问题:

I need to access DOM elements after JQuery append. Let's say I have this:

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

Then is Javascript:

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

Let's say that html is:

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

I need to do something to the two new items. This something includes binding events to them. So I cannot simply use $('.item') because that will add double events to the existing items. Once the new items are part of the DOM, there is nothing about them that distinguishes them from the existing items.

What's the best way to do this?

回答1:

Make a jQuery collection of the html before appending it:

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

回答2:

Here's a working example: http://jsfiddle.net/hunter/7UTA2/

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

This showcases that you still can manipulate the text (or whatever attribute) of the items since you still have a reference to the collection.