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

【问题标题】：How can I attach event handlers to dynamically-generated DOM elements using jQuery?如何使用 jQuery 将事件处理程序附加到动态生成的 DOM 元素？
【发布时间】：2010-01-07 00:05:03
【问题描述】：

我有一个<ul> 标签，我想在里面附加一些<li> 标签。示例：

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

我想给每个<li> 一个不同的点击事件。我怎样才能做到这一点？

【问题讨论】：

标签： javascript jquery dom event-handling

【解决方案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')
;

【讨论】：

【解决方案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>');

【讨论】：

【解决方案3】：

你不能在列表项上放一些标记并给他们所有相同的事件吗？或者，更好的是，使用 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 攻击。

【讨论】：

【解决方案4】：

试试这个

$('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);
}

【讨论】：