Динамически создаваемое событие <li>, связанное с on(), не работает

Question

Я пытаюсь в течение 2-3 часов по этому сценарию. Он создает ul и добавляет к нему li. Затем я пытаюсь прикрепить eventListeners (щелчок), который будет триггером для какой-то функции. В моей локальной функции обратного вызова try извлекаются только последние значения li. Это проблема зацикливания или jquery имеет какие-либо известные проблемы с.on()?

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

Вот модель JS JS ниже:

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/

Answer 1

Вы должны назначить событие ul сам, проходя в li элемент в качестве параметра:

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

Это известно как делегирование события.

Делегирование событий позволяет нам присоединить один приемник событий к родительскому элементу, который будет запускаться для всех потомков, соответствующих селектору, независимо от того, существуют ли эти потомки сейчас или добавляются в будущем.

Если каждый li элемент будет иметь то же самое click функция, вы можете переместить этот обработчик кликов за пределы for цикл полностью.

В качестве примечания вы также можете переместить это var декларация вниз в ваш for петля вот так:

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