Click event on dynamically generated list items using jquery

Question

I have a list being dynamically generated and then I click on the item and pass the index() to another function.

The problem is that this list is being populated dynamically and my code does not respond when I do click event. BUT, if I add a couple of Static li elements to the list in addition to the dynamically populated ones those Static ones work. Its very odd.

Some code:

This dynamically creates the list:

function SetOpenRecentURL( openRecentURL ) {

 $('#recentProjectsId').append('<li>' + openRecentURL + '</li>')
 }

This is the click event to pass the Index():

$('#recentProjectsId li').on('click', function () {
        var projIndex = $(this).index();
        console.log(projIndex)
        OpenProject()

    })

The HTML with a few Static Li's

<div class="recentProjects" id="recentProjectsId">
<li>Test 1</li>
<li>Test 2</li>
        </div>

When I run my program my list looks perfect and includes my static li plus my dynamic ones, but I cannot click on the dynamic ones, only static.

Your markup is not valid, since <li> elements can't have <div> parent. — VisioN
– VisioN, Commented Jan 19, 2013 at 20:25

Matt Ball · Accepted Answer · 2013-01-19 20:26:55Z

24

When I run my program my list looks perfect and includes my static li plus my dynamic ones, but I cannot click on the dynamic ones, only static.

That's because, the way your code binds the click handler, it is only bound to elements in the page at the time that the the listener is bound. Set up the click listener just a little differently and it will work, by taking advantage of event delegation:

$('#recentProjectsId').on('click', 'li', function () {
    // snip...
});

By specifying an additional selector argument to .on():

A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.

Note that your HTML is currently invalid. <li> elements are only valid inside of <ul>s, <ol>s, and <menu>s.

edited Jan 19, 2013 at 20:26

answered Jan 19, 2013 at 20:21

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rob Over a year ago

Worked perfectly! I thought .on() instead of .click() was taking care of it for me, i guess not. Thanks for the help

Matt Ball Over a year ago

You were very close. Using .on() got you 95% of the way there.

joeabala Over a year ago

Works like a cham

VisioN · Accepted Answer · 2013-01-19 20:21:10Z

1

You may use delegated events:

$("#recentProjectsId").on("click", "li", function() {
    var projIndex = $(this).index();
    console.log(projIndex)
    OpenProject()
});

Here #recentProjectsId is the parent element of <li>.

answered Jan 19, 2013 at 20:21

VisioN

146k35 gold badges287 silver badges291 bronze badges

Collectives™ on Stack Overflow

Click event on dynamically generated list items using jquery

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related