Как повесить на много элементов одно событие jquery?
У меня есть много карточек и мне нужно что бы при нажатии на карточку мне возвращалась расстояние от карточки до верхней части экрана и высота до верхней части документа.
Мне же возвращается высота до верхней части документа и еще раз высота до верхней части документа.
Протестировал это на одном элементе (а не с массивом карточек) и там все возвращает как надо, думаю что не правильно задаю слушатель на элементы (c jquery плохо знаком)
Подскажите правильно это сделать, либо поделитесь ссылкой на решение.
jQuery( ".product-item").on( "click", function(event) { let offset = 0; let position = 0; let result = 0; offset = jQuery( this ).offset().top; position = jQuery( this ).position().top; alert('offset = '+ offset + ' position = ' + position ); }); |
jQuery( ".product-item").on( "click", function(event) { let offset = 0; let position = 0; let result = 0; offset = jQuery( this ).offset().top; position = jQuery( this ).position().top; alert('offset = '+ offset + ' position = ' + position ); });
Дополнительно:
Со слушателем все в порядке. Тег вордресса здесь не к месту.
position = $( this ).offset().top - $(window).scrollTop(); |
position = $( this ).offset().top - $(window).scrollTop();
https://codepen.io/beliyadm/pen/oNmQzdy - если есть вертикальная прокрутка - координаты будут соответственно разные
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы повесить одно событие на много элементов с использованием jQuery, можно воспользоваться методом .on(). Этот метод позволяет назначить обработчик события для выбранных элементов, даже если они были созданы динамически или добавлены позже.
Пример использования метода .on() для назначения одного обработчика клика на несколько элементов:
$(document).on('click', '.myClass', function() { // Ваш код обработчика события здесь });
В этом примере мы используем делегирование событий, указывая элемент, который будет содержать все элементы, на которые мы хотим повесить событие (в данном случае document). Затем мы указываем селектор элементов, на которые хотим повесить обработчик события (в данном случае .myClass), и указываем тип события (в данном случае click).
Теперь любой элемент с классом .myClass, который будет добавлен на страницу динамически или уже присутствует на странице, будет иметь обработчик клика, который мы определили.
Таким образом, использование метода .on() позволяет назначить одно событие на много элементов с помощью jQuery.