событие нажатия кнопки вторичного просмотра списка в динамически добавляемых строках

Я добавляю строки в разделенный список с помощью jQm, и я могу получить только первую строку (не добавленную динамически), чтобы вызвать событие щелчка. Я предполагаю, что где-то есть функция обновления, которую мне нужно вызвать, но я не могу понять, что - я уже обновляю список, который, как я ожидал, решит эту проблему...

Вот скрипт: http://jsfiddle.net/z36fy/1/

и вот код:

<ul data-role="listview" data-split-icon="minus" id="list">
    <li>
        <a href="#">Item Description</a>
        <a href="#" class="delbtn">remove</a>
    </li>
</ul>
<a href="#" id="addbtn" class="ui-btn">Add item</a>

JS:

var itemcount=1;

$('#addbtn').click(function() {
   var addstr = '<li><a href="#">Item Description '+itemcount+'</a><a href="#" id="delbtn-'+itemcount+'" class="delbtn">remove</a></li></ul>';
    $('#list').append(addstr);
    $('#list').listview();
    $('#list').listview('refresh');
    itemcount++;
});

$('#list a.ui-li-link-alt').on("click",function() {
   alert('delbtn clicked'); 
});

Что мне не хватает?


jquery-mobile jquery-mobile-listview
person richbee    schedule 19.02.2014    source источник
comment
$(document).on("click", ".delbtn", function () вместо $('.delbtn').click(function() { при работе с динамическими элементами. Это называется делегированием событий jsfiddle.net/Palestinian/z36fy/2.   -  person Omar    schedule 19.02.2014
comment
возможный дубликат привязка динамически добавляемых элементов в jQuery mobile   -  person Omar    schedule 19.02.2014
comment
знал, что это должно быть просто - спасибо!   -  person richbee    schedule 19.02.2014

Ответы (1)


arrow_upward
1
arrow_downward

Поскольку вы динамически добавляете элементы DOM, вы не можете выполнить привязку заранее. Вместо этого используйте делегирование событий (https://learn.jquery.com/events/event-delegation/< /а>):

$('#list').on("click", ".delbtn", function() {
   alert('delbtn clicked'); 
});

Это говорит о привязке события клика к любым элементам с классом delbtn в списке, даже если они еще не существуют.

Обновлен FIDDLE.

person ezanker    schedule 19.02.2014