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攻击的影响。< / p>

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

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

4 个答案: