如何使用jQuery将事件处理程序附加到动态生成的DOM元素上？

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>一个不同的click事件。 我该怎么做？

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攻击。