dynamically bind click event to list

Question

so I am creating a website that has dynamically added content and I want to bind on click events to the list items. The problem is I have a list item within a list item and I can not seem to get the second one to work.

HTML

<ul id="users" class="grid">
    <li>
        <figure>
            <img src="image source" alt="Title" />
            <figcaption>
                <div>
                    <h3>Title</h3>
                    <ol>
                        <li> <span>Additional Button</span> </li>
                        <li> <span>Additional Button</span> </li>
                        <li> <span>Additional Button</span> </li>
                    </ol>
                </div>
            </figcaption>
        </figure>
    </li>
</ul>

Here is the JS

$('ul#users').on("click", "li", function(e) {
    console.log($(this));
});

$('.grid ol').on("click", "li", function(e) {
    console.log($(this));
});

The first bind works without an issue but the second one is never called. Does anyone have an idea on how to get this to work. Please keep in mind that the LI elements are all dynamically created.

because this code is run in two spots, one for users and one for games... I mixed them up... should be fixed now. — Robert E. McIntosh
– Robert E. McIntosh, Commented Oct 13, 2013 at 23:43
Which li elements are dynamic, you have two sets of li (outer or inner). — Erik Philips
– Erik Philips, Commented Oct 13, 2013 at 23:47
both are generated dynamically. The Other one is the main container and the inner one is generated base on the outer one. There may be 3 inner ones or maybe even 5 — Robert E. McIntosh
– Robert E. McIntosh, Commented Oct 13, 2013 at 23:49

Epsil0neR · Accepted Answer · 2013-10-13 23:45:57Z

2

If all your li elements asre dynamically created, (ul.grid>li and ol>li) then your click handler to .grid ol > li must be assigned each time you create ol element in .grid>li.

Another way is try to change from:

$('.grid ol').on("click", "li", function(e) {
    console.log($(this));
});

to:

$('.grid').on("click", "li>ol>li", function(e) {
    console.log($(this));
});

P.S. if you dynamically create elements, then add handlers to them when they are created (if that allow application logic).

answered Oct 13, 2013 at 23:45

Epsil0neR

1,70416 silver badges25 bronze badges

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

2 Comments

Erik Philips Over a year ago

Adding handlers when elements are created is not required to make this work.

Robert E. McIntosh Over a year ago

This worked prefectly, except I had to change it from li > ol > li to ol > li

arma · Accepted Answer · 2013-10-13 23:56:01Z

2

Simple rule to do events on dynamic content is to apply bind event on closest outer parent that is not generated dynamically.

Example:

$('.grid').on('click', 'ol>li', function(e){ 
    console.log($(this)); 
});

Just basically bind event on your not-dynamically created parent and manipulate selector inside of .on() context.

answered Oct 13, 2013 at 23:56

arma

4,12010 gold badges52 silver badges65 bronze badges

Comments

Joren · Accepted Answer · 2013-10-13 23:44:36Z

0

Your selector isn't working, change it to something like this:

$('ol li').on("click", "li", function(e) {
    console.log($(this));
});

answered Oct 13, 2013 at 23:44

Joren

3,37327 silver badges49 bronze badges

Collectives™ on Stack Overflow

dynamically bind click event to list

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related