click event not firing on newly created list item

Question

I have two lists and when you click on the second list the first list removes the first item and add to the second list but when I click on the newly created list item it doesn't fire why is that. jsFiddle demo

$('#SearchList li a').bind("click", function () {
    var $this = $(this).unwrap('<a href="#"></a>').remove().text();

    var $that = $('#Search li:first').remove().text();

    $('<li>' + $this + '</li>').insertBefore('#Search li:first')

    $('#SearchList').append('<li><a href="#">' + $that + '</a></li>');
});

<ul id="Search">
    <li>Electronics</li>
    <li>Image</li>
</ul>

<ul id="SearchList">                        
    <li><a href="#">Interests</a></li>
    <li><a href="#">Entertainment</a></li>
    <li><a href="#">Clothing</a></li>
    <li><a href="#">Pharmacy</a></li>
    <li><a href="#">Home & Garden</a></li>
</ul>

Answer 1

.bind() only affects elements already in the DOM, you want to use .delegate() or .on() (if you are using jQuery 1.7+):

$('#SearchList').on("click", " li a", function () {
    var $this = $(this).unwrap('<a href="#"></a>').remove().text();

    var $that = $('#Search li:first').remove().text();

    $('<li>' + $this + '</li>').insertBefore('#Search li:first')

    $('#SearchList').append('<li><a href="#">' + $that + '</a></li>');
});

Note: .live() has been depreciated as of jQuery 1.7, so it's a good idea to either use .on() or .delegate() .

Here is a jsfiddle of the above solution (using jQuery 1.7): http://jsfiddle.net/jasper/pgwdv/

Some documentation links:

• .on() : http://api.jquery.com/on
• .delegate() : http://api.jquery.com/delegate

Answer 2

您应该尝试使用.live而不是.bind。

Answer 3

You can use the live function to keep click (and other) handlers active for dynamically added content.

Instead of

$('#SearchList li a').bind("click", function () {

Use

$('#SearchList li a').live("click", function () {