jQuery динамическое связывание .on() выбрать родителей или детей?

Question

Например,

$("#dataTable tbody tr").on("click", function() { 
    alert($(this).text()); 
}); 

$("#dataTable tbody").on("click", "tr", function() { 
    alert($(this).text()); 
}); 

.он() связывает "TR" с обработчиком события щелчка. Первый выбирает детей и регистрирует обработчик события регистрации непосредственно. Второй выбирает родительский «tbody» и выбирает дочерние «tr» в качестве аргумента.

Являются ли они оба динамическими связями? У них такой же эффект? В чем разница между этими двумя?

Answer 1

Нет, только вторая версия является динамической привязкой.

Он должен быть прост для понимания. Когда у вас есть код:

$(selector).method(arguments); 

JQuery находит все элементы, которые соответствуют selector на момент выполнения кода, и вызывает method на них в то время. Если вы выполните этот код при первой загрузке страницы, он найдет только элементы, соответствующие селектору в исходном документе. Если элементы tr добавлены динамически, первая версия их не найдет, поэтому они не свяжут с ними событие click.

При использовании .on() с селектором в качестве второго аргумента, например.

$(outerSelector).on(event, innerSelector, function...); 

это работает следующим образом. Он находит все элементы, которые соответствуют outerSelector, и связывает для них обработчик события; эти элементы должны существовать, когда вы вызываете .on(). Когда событие происходит, обработчик проверяет, соответствует ли цель innerSelector, а затем выполняет функцию обратного вызова. Таким образом, это позволяет событию работать с динамически добавленными элементами.

Таким образом, общее правило заключается в том, что outerSelector должен ссылаться на статический элемент в документе, а innerSelector - на динамические элементы.

Answer 2

Также нет dynamic, если можно так выразиться.

Ниже будет связывать событие OnClick для каждой #dataTable tbody tr на странице:

$("#dataTable tbody tr").on("click", function() { /*event*/ }); 

Другой будет связывать событие OnClick для каждой #dataTable tbody на странице, и это событие будет только огня, если один из его потомки нажимали встречает селектор tr (см): Event Delegation

$("#dataTable tbody").on("click", "tr", function() { /*event*/ }); 

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