Событие на динамически созданных элементах?

[d0ublezer0]

Привет, друзья! Возникла Есть у нас онлайн-консультант jivosite, у него есть API. Возникла задача через API запрашивать цену для товаров, которых нет в наличии.
Но документации по "живосайту" мало, а техподдержка ничего вразумительного мне не ответила.

Так вот, первая беда: динамические элементы

На странице категории  при выборе фильтра в левой части страницы, товары подгружаются AJAXом. И вот после этой подгрузки, обработчики из кода ниже перестают работать. Хотя я использую .on как написано в документации jquery

собственно, вот универсальный код (я его сделал и для категории и для страницы товара), который всем заведует:

var $j = jQuery.noConflict(); // создадим указатель для совместимости с другими скриптами

function jivo_onLoadCallback() { // встроенная ункция jivosite, подтверждающаяя его готовность
    console.log("jivo ready");
    $j(document).ready(function () { // ждем загрузки документа
        $j('body').on("click", ".ask-product", function (e) { // не работает после динамической подгрузки
            e.preventDefault();
            $ask_product_id = $j(this).data("product-id"); // достаем идентификатор товара
            $ask_base = $j("#product_name_" + $ask_product_id); // находим базовый элемент с данными о товаре
            $product_name = $ask_base.text(); // забираем название товара
            $product_keycode = atob($ask_base.data("keycode")); // base64 кодированная строка с кодом товара для админа
            console.log("$product_url=" + $product_url);
            console.log("$product_name=" + $product_name);

            jivo_api.showProactiveInvitation("Здравствуйте! Минутку, уточняем для вас цену и наличие " + $product_name + "...");
            jivo_api.sendMessage({name: 'Запрос цены'}, $product_name + " " + $product_keycode);
            jivo_api.open();
        });
    });
};

 

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

Это работает всё крайне медленно и посетитель видит активную кнопку запроса на странице товара раньше, чем код будет готов исполняться. Кликает раньше и ничего не получает естественно. А страница почему-то перезагружается. Как это исправить?

Edited July 27, 2018 by d0ublezer0

[AlexZaw]

5 минут назад, d0ublezer0 сказал:

Кликает раньше и ничего не получает естественно. А страница почему-то перезагружается. Как это исправить?

Как вариант отключать кнопку в css с помощью pointer-events:none;  или атрибутом html disabled , а при загрузке страницы скриптом отменять данные состояния

[Switch74]

1. тут нужно тестить что когда появляется, подозреваю что проблема в

function jivo_onLoadCallback() {
$j(document).ready(function ()

2. Могу предложить, чтобы кнопки появлялись после загрузки скрипта.

[d0ublezer0]

Итак, 

1. вынес загрузку живосайта самым первым, вместе с jquery в самое начало страницы, всё равно они асинхронно грузятся же.

2. кнопки запроса скрыл до выполнения jivo_onLoadCallback, которая добавляет странице класс .jivo-ready, а дальше уже css раскрытие через стили

3. чтобы люди не терялись, после клика теперь скрываю кнопку запроса и показываю

В общем, у живосайта есть проблема - конфликтуют настроенные в админке события с событиями API об этом многие пишут

Но ни одно решение не подходит, т.к. базовые настройки не позволяют привязать действия к событиям страницы.

33 минуты назад, Switch74 сказал:

1. тут нужно тестить что когда появляется, подозреваю что проблема в

Я тоже так считаю, но на стороне живосайта проверить эту гипотезу не могу

С задержкой вроде разобрались костылём. А как быть с динамическими элементами? по идее, должно ж работать, а не хочет

[AlexZaw]

$j('.ask-product') возвращает вам объект, а не живую коллекцию элементов

[d0ublezer0]

1 час назад, AlexZaw сказал:

$j('.ask-product') возвращает вам объект, а не живую коллекцию элементов

Ну всё правильно, из этого объекта я забираю код товара и на основании его строю дальнейшие обращения к элементам, содержащим это код. 

Что вас смутило?

[AlexZaw]

Я конечно могу ошибаться но как я понимаю работу вашего кода - он у вас выполняется один раз. Т.е.страница загрузилась, повешался обработчик клика на все элементы с классом .ask-product. Все. дальше вы можете сколько угодно добавлять элементы, обработчик на них нигде не добавляется.

Хотя, это же делегирование... Хм...

зы.Что-ж вы консультантов то не предупердили? Прям неудобно получилось перед человеком ?

[d0ublezer0]

14 часов назад, AlexZaw сказал:

Все. дальше вы можете сколько угодно добавлять элементы, обработчик на них нигде не добавляется.

Верно. Именно для этого в jQuery придуман .on но в моём случае почему-то не работает, хотя делегируется вроде верно:

$j('body').on("click", ".ask-product", function (e) { 
  /* .... */
});

 

[d0ublezer0]

Ох, блин. Только заметил. При изменении фильтра же меняется и адресная строка.

[AlexZaw]

А ларчик то просто открывался ?

[d0ublezer0]

Только что, AlexZaw сказал:

А ларчик то просто открывался ?

Ну вот и нет.

При открытии новой страницы (если это действительно переход был, а не подмена адреса) должна загрузиться заново и обвязка шаблона со скриптами. А это не происходит.

[AlexZaw]

Попробуйте $j( window ).on( "load", handler ) вместо $j( document ).ready( handler )
Либо запускать скрипт не асинхронно, а после загрузки документа

[d0ublezer0]

1 час назад, AlexZaw сказал:

Попробуйте $j( window ).on( "load", handler ) вместо $j( document ).ready( handler )

Не, так вообще не работает

[AlexZaw]

14 минут назад, d0ublezer0 сказал:

Не, так вообще не работает

Пробовали запускать функцию jivo_onLoadCallback  вручную, после того как фильтр отработал? Просто чтобы понять доступна ли она?