javascript - 两个 jQuery 选择器有什么区别？

Question

我见过这两种将点击事件绑定(bind)到元素的不同方式，但我不明白其中的区别。

$('#cool-thing').on('click', function() {
  alert('This works!');
});

$(document).on('click', '#cool-thing', function() {
  alert('This works!');
});

当点击 #cool-thing 元素时，它们都会产生警报，那么两者之间是否存在显着差异，或者只是做同样事情的方式不同？

Answer 1

第二个选项是事件委托(delegate)，当附加事件时，#cool-thing 可能不存在于 DOM 中，但可以动态附加到 document 在当前浏览 session 期间。 #cool-thing 父元素也可以使用。

第一个选项是 #cool-thing 在 DOM 中的位置。