Зачем это работает:
$(document).on("dblclick", "#areaA tr:has(td)", function(e) {
//code here
});
и это не
$("#areaA tr:has(td)").on('dblclick', function(e) {
//Code here
});
Я точно следую примеру на странице документации jquery, но мой двойной щелчок не срабатывает. Когда я делаю это первым способом, он работает, но похоже, что он дважды запускает событие.
Это относится к сетке пользовательского интерфейса Kendo.
Есть ли разница между этими двумя фрагментами кода?
Основное отличие состоит в том, что условие в первом будет проверяться каждый раз, когда вы нажимаете. Поэтому, если элемент с id areaA или tr или td внутри добавлен динамически, может работать только первый.
Есть ли разница между этими двумя фрагментами кода?
Да. Первый фрагмент кода - это форма делегированной обработки событий, в которой обработчик запускается событиями, пузырящими документ, которые были инициированы элементами-потомками. Второй привязывает обработчик события к фактическому элементу, возвращаемому jQuery для назначенного селектора (в этот случай #areaA tr:has(td)).
Здесь соответствующая информация из документации jQuery:
Первый фрагмент кода:
Делегированные события имеют то преимущество, что они могут обрабатывать события из элементов-потомков, которые добавляются в документ позже время. Выбирая элемент, который, как гарантируется, присутствует на время присоединенного делегированного обработчика событий, вы можете использовать делегированные событий, чтобы избежать необходимости часто прикреплять и удалять события обработчики.
Второй фрагмент кода:
Обработчики событий привязаны только к выбранным в данный момент элементам; они должны существовать в то время, когда ваш код вызывает вызов .on()
Первый описанный вами метод работает, потому что вы выбираете статический родительский элемент, а затем динамический дочерний элемент, который следует правилам привязки событий к динамически созданным элементам с помощью метода .on.
Вот синтаксис метода .on, который звучит так, как будто вы уже немного поработали.
$(selector).on(event,childSelector,data,function,map)
Итак, если я хочу привязываться к динамическому элементу с помощью .on, я должен значить знак доллара сначала выбрать статический родительский элемент, а внутри метода .on выбрать динамический дочерний элемент. В вашем случае правильный пример использования будет работать следующим образом:
$("body").on('dblclick', '#areaA tr:has(td)', function(e) {
//Code here
});
Поскольку вы упомянули, что он не работает, я предполагаю, что #areaA не является статическим элементом. Вы можете заменить тело более важным статическим элементом или просто оставить его тело, это не имеет большого значения.