如何将事件处理程序附加到使用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>一个不同的点击事件。我怎么能做到这一点？

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

你就不能放在列表项一些标记，并给予他们相同的事件？或者，更好的是，使用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漏洞影响。

Answer 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); 
}