How can I bind a function to a click on any ajax generated list item?

Question

I have a simple unordered list that is generated via $.ajax...

<ul id="simpleList"></ul>

After an ajax response it looks something like this:

<ul id="simpleList">
    <li id="aaa">list item aaa</li>
    <li id="bbb">list item bbb</li>
    <li id="ccc">list item ccc</li>
</ul>

I need to move clicked list items from this list to another list (#selectedList).

Normally I'd use the .click function to handle this, but since the initial list items are created on the fly via an ajax call I've started using .live, but I'm still not able to get it to work. Here's an example of where I'm at so far.

$('#simpleList > li').live('click', function() {
    console.log('click registered');
    var contents = $(this).html();
    var listId = $(this).attr('id');
    $(this).remove();
    $('#selectedList').show();
    $('#selectedList').append('<li id="' + listId + '">' + contents + '</li>');
});

I'm expecting an end result like: (assuming the #aaa list item was clicked)

<ul id="simpleList">
    <li id="bbb">list item bbb</li>
    <li id="ccc">list item ccc</li>
</ul>
<ul id="selectedList">
    <li id="aaa">list item aaa</li>
</ul>

But instead nothing happens at all (not even a console log). What am I missing?

score 3 · Accepted Answer · answered Jan 16 '13 at 23:11

Since .live() is deprecated .on() is preferred

$('#simpleList').on('click', 'li', function() {
    console.log('click registered');
    var contents = $(this).html();
    var listId = $(this).attr('id');
    $(this).remove();
    $('#selectedList').show();
    $('#selectedList').append('<li id="' + listId + '">' + contents + '</li>');
});

score 1 · Answer 2 · answered Jan 16 '13 at 23:11

1

If #simpleList is on the page when you bind your events and doesn't go away, you could do

$('#simpleList').on('click', 'li', myFunction);

If it's not, you should either pick a parent element that is or you can wire it up to $(document).

answered Jan 16 '13 at 23:11

Jason

51,583
38
133
185

score 1 · Answer 3 · edited May 23 '17 at 12:02

1

You can directly move them to the other list by using .append().

$('#simpleList').on('click', 'li', function() {
    $('#selectedList').append(this);
});

As everyone else said use .on() for a delegated event. .on() will work for future as well as for current elements.

See it here!

edited May 23 '17 at 12:02

Community

1
1

answered Jan 16 '13 at 23:14

Alexander

23,432
11
63
73

Mike Brant · Answer 4 · 2013-01-16T23:20:47.813

0

You really should be using on instead of live. You can also easily move the node from one parent to another using append(). So it might look like this:

$('#simpleList').on('click','li', function() {
    console.log('click registered');
    $('#selectedList').append(this).show();
});

edited Jan 16 '13 at 23:20

answered Jan 16 '13 at 23:11

Mike Brant

70,514
10
99
103

1

With every edit your answer just becomes like mine. Now, you are just one edit away from it ;) – Alexander Jan 16 '13 at 23:22

score 0 · Answer 5 · edited May 23 '17 at 12:32

Use on instead of live. Here is why.

Also, you will need to call your code after the ajax call has succeeded, something like:

$.ajax({
    url: 'someUrl',                
    success: function (html) {
       $('#simpleList > li').on('click', function() {
        console.log('click registered');
        var contents = $(this).html();
        var listId = $(this).attr('id');
        $(this).remove();
        $('#selectedList').show();
        $('#selectedList').append('<li id="' + listId + '">' + contents + '</li>');
    });
    }
});

Update: You can move it with less code (see appendTo - untested)

$('#simpleList > li').on('click', function() {    
            $(this).appendTo('#selectedList)
}

How can I bind a function to a click on any ajax generated list item?

5 Answers5