使用 jQuery.append 时绑定事件丢失答案

【问题标题】：Bound events are lost when using jQuery.append使用 jQuery.append 时绑定事件丢失
【发布时间】：2021-03-06 05:48:30
【问题描述】：

我有一个像这样的简单代码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!");
             })
  );
});

根据docs，这应该可以，对吧？

【问题讨论】：

e.preventDefault() 行有语法错误。加个逗号:)
对不起.. 输入错误，但这不是问题..

标签： jquery jquery-events dom-manipulation

【解决方案1】：

DOM 遍历方法不是支持查找要发送的元素为了活着（）。相反， .live() 方法应该总是在之后直接调用一个选择器，如上例所示。

Source

所以你的代码中唯一的问题是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() 就足够了，具体取决于您的用例）。

【讨论】：

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

【讨论】：