JQuery. С событием doubleclick

Зачем это работает:

$(document).on("dblclick", "#areaA tr:has(td)", function(e) {
     //code here
 });

и это не

$("#areaA tr:has(td)").on('dblclick', function(e) {
    //Code here
});

Я точно следую примеру на странице документации jquery, но мой двойной щелчок не срабатывает. Когда я делаю это первым способом, он работает, но похоже, что он дважды запускает событие.

Это относится к сетке пользовательского интерфейса Kendo.

Есть ли разница между этими двумя фрагментами кода?

Ответы

Ответ 1

Основное отличие состоит в том, что условие в первом будет проверяться каждый раз, когда вы нажимаете. Поэтому, если элемент с id areaA или tr или td внутри добавлен динамически, может работать только первый.

Ответ 2

Есть ли разница между этими двумя фрагментами кода?

Да. Первый фрагмент кода - это форма делегированной обработки событий, в которой обработчик запускается событиями, пузырящими документ, которые были инициированы элементами-потомками. Второй привязывает обработчик события к фактическому элементу, возвращаемому jQuery для назначенного селектора (в этот случай #areaA tr:has(td)).

Здесь соответствующая информация из документации jQuery:

Первый фрагмент кода:

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

Второй фрагмент кода:

Обработчики событий привязаны только к выбранным в данный момент элементам; они должны существовать в то время, когда ваш код вызывает вызов .on()

Ответ 3

Первый описанный вами метод работает, потому что вы выбираете статический родительский элемент, а затем динамический дочерний элемент, который следует правилам привязки событий к динамически созданным элементам с помощью метода .on.

Вот синтаксис метода .on, который звучит так, как будто вы уже немного поработали.

$(selector).on(event,childSelector,data,function,map)

Итак, если я хочу привязываться к динамическому элементу с помощью .on, я должен значить знак доллара сначала выбрать статический родительский элемент, а внутри метода .on выбрать динамический дочерний элемент. В вашем случае правильный пример использования будет работать следующим образом:

$("body").on('dblclick', '#areaA tr:has(td)', function(e) {
    //Code here
});

Поскольку вы упомянули, что он не работает, я предполагаю, что #areaA не является статическим элементом. Вы можете заменить тело более важным статическим элементом или просто оставить его тело, это не имеет большого значения.