Question

我正在尝试将li元素附加到列表中，其中包含具有自定义点击事件的链接...我正在尝试类似：

<div id="myid"><ul></ul></div>

$('#myid ul').append("<li><a href=''>Link</a></li>").click(function(){alert('hi')})

但点击事件位于 li ，而不是 a href 。我该如何解决这个问题？

Answer 1

实际上，click事件处理程序绑定到ul元素。

我该如何解决这个问题？

将其绑定到a元素：

$("<li><a href=''>Link</a></li>").find('a').click(function(event) {
    event.preventDefault(); // <-- if you don't want the browser follow the link
    alert('hi');
}).end().appendTo('#myid ul');

DEMO

单独创建链接可能更清晰：

$('<a />', {
    text: "Link",
    href: "",
    click: function() {/*...*/}
}).wrap('<li />').parent().appendTo('#myid ul');

有关所用方法的信息，请参阅jQuery API documentation。

Answer 2

您可以使用.on，因为您的li正在动态添加

 $('#myid ul').append('<li id="li1"><a href=''>Link</a></li>');

    $('body').on('click','#li1',function(){
         alert('hi');
    });

Answer 3

$('#myid ul').append("<li><a href=''>Link</a></li>");

$("a").live("click", function() { // or use on(...)
    alert('hi');
});

在追加后，将实时点击绑定到a元素。 Jsfiddle：http://jsfiddle.net/reygonzales/Z5pSC/

Answer 4

$('#myid ul').append("<li><a href=''>Link</a></li>")
     .find("a:last").click(function(){
         alert('hi')
});

使用包含自定义点击事件的链接附加li

4 个答案: