Question

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

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

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

jsFiddle

点击#first后，#second会被追加。点击#second后，我想要它隐藏自己。

为什么这不起作用？

Answer 1

启动此事件处理程序时

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

＆＃39;＃秒＆＃39;元素还没有存在。稍后您添加元素，但该元素不会与任何事件处理程序一起启动。

你可以试试这个

$('#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();
  });
});

Answer 2

使用jQuery on函数。

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

Answer 3

它无效，因为$('#second')在执行时与任何内容都不匹配。

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

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

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

Answer 4

尝试

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

Answer 5

澄清你的代码无法正常工作的原因：在定义#second的事件处理期间，div不存在。在确定页面中存在DOM元素$（“＃second”）之后，应该定义事件处理。

Answer 6

使用on()

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

参考

http://api.jquery.com/on/

jQuery事件处理程序不处理用jQuery插入的对象

6 个答案: