2015-11-17 5 views
1

Я использую JQuery sortable и имею два двух списка, из которых я перемещаю элементы от одного к другому. Первый ход работает просто с двойным щелчком. Теперь, когда он во втором списке, я хочу разрешить пользователям удалять элементы, нажав и нажав клавишу удаления. Мой план сделать это состоит в том, чтобы вызвать триггер события щелчка и украсить элемент списка классом, а затем, когда удаляется ключ удаления, он удалит все элементы с этим классом. На этом этапе у меня возникают проблемы с получением события click. Поскольку я создаю динамические элементы списка, я использую ключевое слово on event. Мой html для второго списка выглядит так.на событии click в javascript not triggering

<div id="CartContents" class="ui-widget-content"> 
    <ul id="sortableArea" class="cartSortable"> 
    </ul> 
</div> 

Мой js для обработки события click выглядит следующим образом.

$('.cartSortable li').on("click", function() { 
    alert('here'); 
    $(this).toggleClass("selected"); 
}); 

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

+0

Я не вижу Ли там .. –

+1

Ли ленивы загружены правильно? –

+0

Загружается ли ваш код JavaScript в верхней части страницы или внизу? – Blazemonger

ответ

2

Поскольку вы создаете элементы списка динамически, вам необходимо delegate the event:

$('.cartSortable').on('click', 'li', function() { 

Или, если ваш скрипт выполняется до <body>:

$(document).on('click', '.cartSortable li', function() { 
+0

Это сработало. Благодарю. Я быстро понял, что прочитал указанную вами ссылку, что событие привязано к div, который существует при загрузке страницы, со ссылкой на ли, который будет создан позже. Это правильно, или есть лучший способ подумать об этом? – Nate

+0

У вас есть правильная идея. Событие * делегировано * на '.cartSortable', который ищет дочерний элемент' li', который был нажат. jQuery также изменяет 'this', чтобы указать на щелчок' li' внутри обработчика события. – Blazemonger

-1

вы можете использовать live метод JQuery, который привязывает обработчик событий ко всем элементам, которые соответствуют текущему селектору запросов. http://api.jquery.com/live/

$('.cartSortable li').live("click", function() { 
    alert('here'); 
    $(this).toggleClass("selected"); 
}); 
+1

Live устарел и удален из современных версий JQuery. 4+ года назад, и это было бы верным ответом. – epascarello