Question

我已经看到了将点击事件绑定到元素的这两种不同方式，但我并不了解其中的差异。

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

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

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

Answer 1

第二个选项是事件委派，其中document.documentElement.clientHeight在附加事件时可能不存在#cool-thing，但可以在当前浏览会话期间动态附加到DOM。也可以使用document父元素。

第一个选项是#cool-thing中存在#cool-thing。

Answer 2

感谢那些回答我问题的人。这两个答案都非常有用。

为了帮助自己理解你的答案，我在小提琴中玩弄这个。我以为我会分享小提琴作为答案，希望能帮助其他人理解这一点，以防你喜欢我并且只通过视觉例子学习。

https://jsfiddle.net/zf3g22um/2/

HTML

<button id="add-reg-bound-element">Add Regularly-Bound Element</button>
<button id="add-doc-bound-element">Add Document-Bound Element</button>

CSS

.reg-bound-element, .doc-bound-element {
  font: 600 14px sans-serif;
  height: 100px;
  line-height: 100px;
  text-align: center;
  width: 300px;
}

.reg-bound-element {
  background-color: #BBB;

  &:before {
    content: 'Regularly-Bound Element';
  }
}

.doc-bound-element {
  background-color: green;
  color: white;

  &:before {
    content: 'Document-Bound Element';
  }
}

JS

//////////////////////////
// REGULARLY BOUND ELEMENT
//////////////////////////
$('#add-reg-bound-element').on('click', function() {
  $('html').append('<div class="reg-bound-element"></div>');
});

$('.reg-bound-element').on('click', function() {
  alert('Regular binding works!');
});

/////////////////////////
// DOCUMENT BOUND ELEMENT
/////////////////////////
$('#add-doc-bound-element').on('click', function() {
  $('html').append('<div class="doc-bound-element"></div>');
});

$(document).on('click', '.doc-bound-element', function() {
  alert('Document binding works!');
});

两个jQuery选择器之间的区别是什么？

2 个答案:

HTML

CSS

JS