Почему не работает $.click() в данном скрипте?

Question

[arudmin]

Набросал скрипт вывода списка каналов и хочу дальше обрабатывать клик на элемент, но столкнулся с тем, что обработчик не работает.

jsbin.com/USUdatU/11/edit?html,js,console,output

Есть идеи?

Comments

[arudmin]

АПД. Обработчик не работает с элементами, которые были добавлены после выполнения $.ajax-запроса.

Answer 1

[Yuri Shikanov]

Вам нужно вешать событие при помощи .on
jsbin.com/IKumIho/1/edit?html,css,js,output

Comments

[arudmin]

$("span.linkurl").on("click", function(){
console.log('click-click');
});

не работает

[Yuri Shikanov]

@arudmin обновил ответ, добавил пример

[arudmin]

Спасибо, теперь работает :-)

Answer 2

[Сергей Мельников]

ну так верно, вы вешаете событие на тот момент, когда у вас есть только шаблон, и клик срабатывает только на него, в данном случае нужно делегировать событие

$(".channels").on("click", ".linkurl", function(){ /*    */ })

либо добавлять слушатель события только после добавления элемента (когда он уже существует в DOM)

$("div.channels ul")
  .append($('<li>')
  .append($(item)))
  .show();
$(item).click(function(){ /*    */ })

Comments

[arudmin]

Да, спасибо, такой вариант делегирования работает.

Answer 3

[Виталий Архипов]

Работает, у вас же невидимый этот элемент (в div с display:none)

Answer 4

[arudmin]

Этот див - шаблон для постоения каркаса. после разбора JSON, клонируется только содержание дива. Да и обработка клика происходит у других элементов ".linkurl"

Answer 5

[cjohn]

Ты поставил обработчик на скрытый элемент (тот у которого "display: none;" стоит). Потом добавляешь на страницу остальные элементы (цикл for) не вешая на них никакие обработчики.
Внимательней надо быть)

Comments

[arudmin]

Скрытый элемент - это шаблон. Я убрал "display: none;" - все равно не работает.

Понимаю, что проблема в том, что элементы появляются после объявления обработчика, но как заставить работать код в тако случае?

[legiero]

$(selector).on()

[arudmin]

$("span.linkurl").on("click", function(){
console.log('click-click');
});

не работает