点击vs点击进入的元素

Question

$(function(){
    $('div').append('<a>link</a>');

  $('a').click(function(){
    alert('trigger <a>!');
  });
});

https://jsfiddle.net/nj6Lsgo1/

为什么<a>触发我的情况？我认为我必须使用.on()之类的绑定作为传入元素。

Answer 1

  

为什么<a>触发我的情况？

事件只是被触发，因为在将锚元素附加到DOM之后附加了click事件监听器。

换句话说，$('a').click(function() {...});会将click事件侦听器附加到当时存在于DOM中的所有a元素。

由于已附加a元素，因此附加了click事件侦听器。

  

我认为我必须使用.on()之类的绑定作为传入元素

如果在元素存在于DOM之前附加事件监听器，则只需要delegate the event listener。

例如，如果您要反转逻辑并在附加事件侦听器后直接附加元素，那么它根本不起作用：

// This wouldn't be fired since the element is 
// appended after the event listener is attached

$('a').click(function() {
  alert('trigger <a>!');
});

$('div').append('<a>link</a>');

这就是为什么你需要将事件监听器委托给当时存在于DOM中的祖先元素的原因：

$('div').on('click', 'a', function() {
  alert('trigger <a>!');
});

$('div').append('<a>link</a>');