jquery - 使用 jQuery.append 时绑定事件丢失

Question

我有一个像这样的简单代码http://jsfiddle.net/9braK/2/

$(function(){

$('body').append(
    $("<a/>").attr({ "id": "foo", "href":"#" })
             .text("click me")
             .live("click",function(e){
                e.preventDefault();
                alert("Hello World!");
             })
  );
});

根据文档，这应该有效，对吧？

Answer 1

不支持 DOM 遍历方法来查找要发送到 .live() 的元素。相反，应始终在选择器之后直接调用 .live() 方法，如上例所示。

来源

因此，您的代码中唯一的问题是live(). "<a/>"不是选择器，它的live()工作方式将无法找到相应的元素。如果您只是使用.click()，它当然可以完美运行。

你可以使用类似的东西

$('body')
  .append(
    $("<a/>")
      .attr({ "id": "foo", "href":"#" })
      .text("click me")
    )
  )
  .delegate("#foo", "click", function(e){
                e.preventDefault();
                alert("Hello World!");
             });

实现您想要的（但我认为click()根据您的用例，一个简单的就足够了）。

Answer 2

这个有效：

$(function(){
  // Add the click event for all future elements having the id #foo
  $('#foo').live("click",function(e){
                    e.preventDefault();
                    alert("Hello World!");
                 });

    $('body').append(
        $("<a/>").attr({ "id": "foo", "href":"#" })
                 .text("Continue ")
    );
});