javascript - 单击与单击传入元素

Question

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

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

https://jsfiddle.net/nj6Lsgo1/

为什么 <a>在我的情况下触发？我以为我必须使用像 .on() 这样的绑定(bind)用于传入元素。

Answer 1

Why does the <a> trigger in my case?

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

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

自 a元素已经附加，click附加了事件监听器。

I thought I have to use binding like .on() for incoming elements

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

例如，如果您要颠倒逻辑并在附加事件监听器之后直接附加元素，那根本行不通:

// 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>');

这就是为什么您需要将事件监听器委托(delegate)给当时确实存在于 DOM 中的祖先元素:

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

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