В чем разница между двумя селекторами jQuery?

Question

Я видел эти два разных способа привязки события click к элементу, но я не понимаю разницу.

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

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

Они оба выдают предупреждение, когда #cool-thing элемент щелкают, так есть ли существенная разница между двумя или просто другой способ сделать то же самое?

Answer 1

Второй вариант - делегирование события, где #cool-thing может не существовать в DOM когда событие прикреплено, хотя может быть динамически добавлено к document во время текущей сессии просмотра. #cool-thing родительский элемент также может быть использован.

Первый вариант - это где #cool-thing существует в DOM,

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!');
});