[Решено] Перезапуск js обработчиков после обновления товаров в мега фильтр про

Тема в разделе "OpenCart", создана пользователем mujik99, 10 май 2016.

Статус темы:
Закрыта.
  1. mujik99

    mujik99

    Регистрация:
    21 апр 2016
    Сообщения:
    18
    Симпатии:
    1
    Всем привет , такая ситуация : написал скрипт для обновления данных при наведении на товар , когда поставил мега фильтр про то при фильтрации обновляется контент товаров , мой js не подхватывает эти обновления контента товара т. к. я его подключил в хедере а при фильтрации обновляется только часть страницы и мой код уже не видит этот кусок с которым работает . Может кто знает , как мне обновлять свой скрипт вместе с обновлением контента при фильтрации от мега фильтр?
     
  2. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    2.054
    Симпатии:
    779
    Это не совсем корректная формулировка.
    Суть в том, что если вешать обработчик таким образом:
    Код:
    $('#selector').on('mouseenter', function(){})
    То в момент выполнения этой строки сканируется DOM и навешиваются слушатели. Соответственно, если DOM меняется, на новые элементы уже ничего не вешается.

    На страницах, где возможно изменение DOM после загрузки страницы, обработчик нужно навешивать таким образом:
    Код:
    $(document).on('mouseenter', '#selector', function(){})
    В таком варианте слушается весь DOM, а не отдельные элементы.
     
  3. mujik99

    mujik99

    Регистрация:
    21 апр 2016
    Сообщения:
    18
    Симпатии:
    1
    Т. е. мне нужно повесить листенер на все дом елементы , а не на какие-то конкретные??? Дело в том что я использую ховер функцию , и при наведении на определенный блок , у меня происходит аякс запрос при помощи которого получаю данные с сервака .

    вот код
    Код:
        $('.product-series-img').hover(
            function() {
                var thisProdId = $(this).attr('product-id');
                if ($('.bx-wrapper')) {
                    var thisImg = $(this).parents(".product-thumb").children('.product-caption').children('.image').children('a').children('img');
                    var thisImgCaption = $(this).parents(".product-thumb").children('.product-caption').children('.caption');
                } else {
                    var thisImg = $(this).parents(".product-thumb").children('.product-caption').children('.image').children('a').children('img');
                    var thisImgCaption = $(this).parents(".product-thumb").children('.product-caption').children('.caption');
                }
                var data = {
                    "ProdId": thisProdId
                }
                console.log(thisProdId)
                $.ajax({
                    url: 'index.php?route=product/product/getProductInfo',
                    type: 'post',
                    data: data,
                    dataType: 'json',
                    beforeSend: function() {
                        console.log('отослано');
                    },
                    success: function(json) {
                        console.log(json);
                        $(thisImg).attr('src', json[0].img);
                        $(thisImg).attr('title', json[0].name);
                        $(thisImg).attr('alt', json[0].name);
                        $(thisImgCaption).children('h4').html(json[0].name);
                        var optionsVal = json.options[0].product_option_value;
                        $(thisImgCaption).children('.prod-sizes').children('.sizes').html("");
                        for (var i = 0; i < optionsVal.length; i++) {
                            if (optionsVal[i].quantity > 0) {
                                $(thisImgCaption).children('.prod-sizes').children('.sizes').append("<li><a href='#'>" + optionsVal[i].name + "</a></li>")
                            } else {
                                $(thisImgCaption).children('.prod-sizes').children('.sizes').append("<li class='nosize'><a href='#'>" + optionsVal[i].name + "</a></li>")
                            }
                        }
                    }
                });
            },
            function() {
            });
    все это еще обернуто в документ реди. Выходит если я буду запускать функцию при каком либо изменении дома то у меня произойдет рекурсия и все ляжет. А мне нужно как- то определить в каком месте происходит обновление контента в этом фильтре . Или я что-то не так делаю .
     
  4. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    2.054
    Симпатии:
    779
    Если вдаваться в технические подробности, то в варианте, который я предложил, обработчик вешается не на все элементы, а ни на один из них.
    В js любое событие в DOM дереве поднимается вверх по родителям к корню (если это вручную не отключено в отдельном случае) и вешая обработчик на
    document мы просто отслеживаем все события на корне и смотрим, на том ли элементе оно произошло и то ли это событие, которое нам надо обработать.
    Никакой рекурсии там не будет и при каждом изменении ничего запускаться не будет, кроме того, что и должно запуститься.
     
    mujik99 нравится это.
  5. mujik99

    mujik99

    Регистрация:
    21 апр 2016
    Сообщения:
    18
    Симпатии:
    1
    все , разобрался спасибо огромное.
     
Статус темы:
Закрыта.