Javascript jQuery事件处理程序无法处理使用jQuery插入的对象

单击第一个后，将追加第二个。当第二个被点击时，我希望它 隐藏自己

---

为什么不工作？

启动此事件处理程序时

<button id="first">Click me first</button>

$('#first').click(function(){
  $('body').append('<button id="second">Now click me</button>');
});

$('#second').click(function(){
  $(this).hide();
});

“第二个”元素尚不存在。稍后添加元素，但该元素不会使用任何事件处理程序启动

你可以试试这个

 $('#second').click(function(){
  $(this).hide();
});

它不工作，因为执行时$'second'与任何内容都不匹配

在添加到DOM之前，请尝试将单击处理程序分配给元素：

$('#first').click(function(){
  $('body').append('<button id="second">Now click me</button>');
  // event handler will attached for already exist '#second' element
  // attach event if only #second doesn't have event yet
  if(!($('#second').data('events') != null && $('#second').data('events').click != undefined && $('#second').data('events').click.length == 1))
  $('#second').click(function(){
    $(this).hide();
  });
});

如果需要在元素存在之前“附加”事件处理程序，也可以使用来委托事件。

使用jQuery on函数

$('#first').click(function(){
  var $button = $('<button id="second">Now click me</button>');
  $button.click(function() {
    // handler
  });
  $('body').append($button);
});

试一试

---

澄清代码不工作的原因：在定义second的事件处理过程中，div不存在。在确定页面中存在DOM元素$second之后，应该定义事件处理。

在

提及

---

@Dnyan live早就被弃用了，我认为在jQuery1.9.live中删除是不被弃用的。不要使用它。明确使用。它将替换委托和活动，并且在dom准备就绪后对添加到dom中的项目有效。hmmm，如果这样做，每次单击第一个项目时，单击事件将绑定到第二个项目。这种情况似乎是正确的，但我不理解。我们只需添加事件处理程序检查，以避免多次附加click事件。我有上面的更新。

$(document).on('click', '#second', function(){
  $(this).hide();
});

$('#second').on("click",function(){
 $(this).hide();
});

$(document).on('click', '#second', function(){
  $(this).hide();
})