Как я могу прикрепить обработчики событий к динамически генерируемым элементам DOM, используя jQuery?

Question

У меня есть тег <ul>, к которому я хочу добавить несколько тегов <li>. Пример:

$('body').append("<ul id='myUL'>").find("ul");
$('#myUL').append('<li id='a'>a</li>');
$('#myUL').append('<li id='b'>b</li>');

Я хочу назначить каждому <li> отдельное событие клика. Как я могу это сделать?

Answer 1

Попробуйте что-то вроде этого:

$('<ul></ul>')
    .attr('id', 'myUL')
    .append(
        $('<li>a</li>').click(function() {
            alert('First one clicked');
        })
    )
    .append(
        $('<li>b</li>').click(function() {
            alert('Second one clicked');
        })
    )
    .appendTo('body')
;

Answer 2

var firstLi = $('<li id='a'>a</li>');
firstLi.click(function() { ... });
$('body').append("<ul id='myUL'>").find("ul");
$('#myUL').append(firstLi);
$('#myUL').append('<li id='b'>b</li>');

Answer 3

попробуйте

$('body').append("<ul id='myUL'>").find("ul");
$('#myUL').append('<li id='a' onclick="myeventHandler(event)" >a</li>');
$('#myUL').append('<li id='b' onclick="myeventHandler(event)" >b</li>');

function myeventHandler(ev){
        var target = ev.target || ev.srcElement;
          alert(target.id);
}

Answer 4

Разве вы не можете просто поставить маркер на элемент списка и дать им одно и то же событие? Или, что еще лучше, используйте событие live(), а затем вам даже не нужно добавлять событие:

$('#myUL').append('<li id='a'>a</li>');

с:

$(function() {
  $("#myUL li").live("click", function() {
    if (this.id == "a") {
      ...
    }
  });
});

В противном случае просто измените порядок, и синтаксис будет намного лучше:

$"<li></li>").attr("id", "a").text("a").appendTo("#myUL").click(function() {
  ...
});

Вы можете просто сделать это:

$"<li id='" + a + "'>" + a + "</li>")..appendTo("#myUL").click(function() {
  ...
});

но я не рекомендую это при работе с динамическим вводом, поскольку вы не можете корректно экранировать специальные символы, тогда как вызовы attr() и text() корректно экранируют контент и делают вас менее восприимчивыми к эксплойтам XSS.