Dynamically created
elements eventattaching with on() doesn't work

Question

I am trying for 2-3 hours on this script. It creates ul and append li to it. Then i try to attach eventListeners (click) which will be a trigger for some function. On my local try callback function only retrieves last li values. Is it a looping problem or jquery has any known issues with .on() ?

The Container ul tag below
<ul id="container">
    <li>emtyp statically created</li>
</ul>

Here is js model js below:

var xy=1;
for(xy=1; xy<10; xy++){
$("#container").append('<li id="li_'+xy+'">'+xy+'</li>');   
    $("#li_"+xy).on("click",function(){alert(xy)});
}

http://jsfiddle.net/caglaror/c8jg6f8y/1/

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures#Creating_closures_in_loops.3A_A_common_mistake — Arun P Johny, Aug 13 '14 at 14:14
The event handler are called correctly... the issue is the use of closure variable xy... see http://jsfiddle.net/arunpjohny/az17mb0p/2/ — Arun P Johny, Aug 13 '14 at 14:18
After after hours. Still can't solve my issue. Is there anybody help me directly on my codes? — caglaror, Aug 14 '14 at 11:19
No. I tried both two methods that you gave. But not succeed. — caglaror, Aug 14 '14 at 12:40
I try to convert my original code to your example http://jsfiddle.net/caglaror/az17mb0p/5/ — caglaror, Aug 14 '14 at 12:52
Some how event delegation method works. Please donte waste your time. It works for now. Thank you very much. May i contact to youon linkedIn? — caglaror, Aug 14 '14 at 13:11

score 3 · Accepted Answer · answered Aug 13 '14 at 14:14

You have to assign the event to the ul itself, passing in the li element as a parameter:

$('ul#container').on('click', '#li_' + xy, function() { ... });

This is known as event delegation.

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

If each li element will have the same click function, you can move that click handler outside of your for loop completely.

As a side note you can also move that var declaration down into your for loop like so:

for (var xy = 1; ...; ...)

After reading whole night over my question, i got the point. Whenever a user actions includes inserting or removing elements from the working area we should use `event delegation`. But if we are using such thing like ajax to reload all ingredients of container element, we can use closure. In my real application situation, i am reloading data with json and then recreating inner elements (li). So i am going to use closure variables. @Arun and @James you are great guys ;) — caglaror, Aug 14 '14 at 06:44

Dynamically created elements eventattaching with on() doesn't work

1 Answers1

Dynamically created
elements eventattaching with on() doesn't work