d0ublezer0

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

Recommended Posts

Привет, друзья! Возникла Есть у нас онлайн-консультант 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 by d0ublezer0

Share this post


Link to post
Share on other sites
5 минут назад, d0ublezer0 сказал:

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

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

Итак, 

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

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

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

AotVFtpBRRW_e1nBsKleyg.png

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

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

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

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

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
1 час назад, AlexZaw сказал:

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites
14 часов назад, AlexZaw сказал:

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

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

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

 

Share this post


Link to post
Share on other sites
Только что, AlexZaw сказал:

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

Ну вот и нет.

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
1 час назад, AlexZaw сказал:

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

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

Share this post


Link to post
Share on other sites
14 минут назад, d0ublezer0 сказал:

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

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Member Statistics

    46,303
    Total Members
    3,128
    Most Online
    xakerfsb
    Newest Member
    xakerfsb
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.