3

Добрый день! Клиент попросил для формы livetex на сайте реализовать отправку данных в Цели Яндекс-метрики при клике по некоторым её элементам. Форма подключается JS-скриптоблоком в тело главной страницы, т.е. HTML генерится с помощью JS и ихнего сервера. У LiveTex поддержка целей Яндекса пока что в разработке, поэтому надо самим что-то изобретать. Я узнал div class этих элементов через "Инспектировать элемент" в Мозилле и написал в теле основной страницы сайта скрипты с jQuery, которые ловят клики по этим классам - и далее вызывают yaCounterMMMM.reachGoal('xwidget2');

Однако ничего не происходит - jQuery вообще не ловит события, которые генерируются при клике по компонентам livetex'овой формы, несмотря на то что после окончания загрузки страницы это вроде бы такой же полноправный HTML, как и свой родной. Он же инспектируются в Мозилле!

Можно ли что-то сделать? Техподдержка LT молчит.

Вот тестовая страница, на которой надо отладить сам алгоритм и потом перенести на главную (пока что для упрощения вместо reachGoal() поставили вызов банального алерта): http://samurai.spb.ru/testm.html

Там справа будет всплывать телефонная трубка (не снизу - нижнюю форму трогать не надо), надо щелкнуть по ней, развернется однострочная форма (с зеленой телефонной трубкой и зеленой кнопкой отправки) к которой надо наш обработчик прикрутить. (Прикол - трубка всплывает лишь с 10 утра до 20 вечера, на ночь Livetex'овские её отключают).

PS. Обработчик типовой:

 $(document).ready(function() {

    $('.lt-xbutton-icons').click(function(){
        alert('Клик по LiveTex элементу!');
        return true;
}); });

1 ответ 1

2

Если я вас правильно понял этот самый LiveTex генерирует свой DOM. $(document).ready же срабатывает на завершение начального DOM. Т.е. в момент когда вы пытаетесь получить $('.lt-xbutton-icons') их ещё не будет существовать. Проверьте это через

console.log("element exist: " + !($('.lt-xbutton-icons').length === 0))

Если это так, то корректным решением будет повесится на некий on-DOM-ready колбэк LiveTex, а если его нет, то на общий on-DOM-change. Либо захачить через setInterval - ждать пока не появятся нужные элементы.

В комментарии ещё предложили использовать delegated events из jQuery: $(..).click(fn) является синонимом $(".lt-xbutton-icons").on("click", fn), а вариант с delegated events выглядит так: $(document).on("click", ".lt-xbutton-icons", fn). Т.е. селектор переезжает из $() в параметр on() и проверяется не в момент регистрации обработчика, а в момент собственно клика.

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

6
  • 1
    Если дело именно в этом, то можно еще использовать delegated events из jQuery: $(..).click(fn) является синонимом $(".lt-xbutton-icons").on("click", fn), а вариант с delegated events выглядит как-то так: $(document).on("click", ".lt-xbutton-icons", fn). Т.е. селектор переезжает из $() в параметр on() и проверяется не в момент регистрации обработчика, а в момент собственно клика.
    – Nickolay
    28 авг 2015 в 8:24
  • @Nickolay да, похоже так тоже можно. Скорее всего это даже лучший вариант. Спасибо за наводку! 28 авг 2015 в 8:27
  • "Т.е. в момент когда вы пытаетесь поверить событие $('.lt-xbutton-icons') ещё не будет существовать" =стоп, а ведь проверка в обработчике осуществляется уже после того, как я кликнул, ибо использую я $('.class').click(). А кликаю я именно после того, как элемент был полностью сформирован. Момент регистрации по идее не должен играть никакой роли. 28 авг 2015 в 10:24
  • @NDanilov2015 кликаете после, а обработчик навешиваете до, не? 28 авг 2015 в 10:28
  • Обработчик писал штатным образом, которым он на обычных HTML-страницах работает, т.е. $(document).ready(function() PS. С делегированными событиями заработало, большое спасибо! 28 авг 2015 в 10:35

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.