Инициализировать jquery снова после замены списка с помощью ajax-вызова

У меня есть модуль Prestashop для отображения списка последних продуктов из разных категорий продуктов. В верхней части списка представлены такие ссылки меню, как: ВСЕ, КАТЕГОРИЯ 1, КАТЕГОРИЯ 2, КАТЕГОРИЯ 3 и т. Д. Когда страница открывается, она отображает «Все» последние продукты. Но когда я нажимаю, например, на категорию 1, он использует Ajax для загрузки только продуктов, принадлежащих выбранной категории.Инициализировать jquery снова после замены списка с помощью ajax-вызова

Я реализовал этот плагин jquery на модуле - https://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/.

Основные grid.js JQuery файл загружается до конца </body> и инициализации, добавив следующий код до конца </body> тоже:

<script> 
    $(function() { 
     Grid.init(); 
    }); 
</script>

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

В файле JS для модуля, загруженного в <head> страницы, я заметил, что Ajax вызова для категорий производятся на код ниже:

$(document).on('click','#list-category-new-product li a',function(e){ 
     $('#blocknewproducts1_reload').addClass('active').prepend($('.newproduct_ajax_loader').html()); 
     $('#blocknewproducts1').css('opacity', '0.7'); 
     e.preventDefault(); 
     $.ajax({ 
      type: 'POST', 
      headers: { "cache-control": "no-cache" }, 
      url: baseDir + 'modules/blocknewproducts1/newproduct_ajax.php', 
      async: true, 
      cache: false, 
      dataType : "json", 
      data: 'ajax_new_product=1&p=1&id_category='+$(this).attr('data-id'), 
      success: function(jsonData,textStatus,jqXHR) 
      { 
       $('#blocknewproducts1').html(''); 
       $('#blocknewproducts1').html(jsonData.blocknewproduct); 
       $('#blocknewproducts1').css('opacity', '1'); 
      } 
     }); 
    });

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

источник

2017-02-16 atsngr

<script> 
$(function() { 
     Grid.init(); 
    }); 
</script>

это одна функция отключения, вам нужно вызвать его снова в вызове успеха, как так

$(document).on('click','#list-category-new-product li a',function(e){ 
     $('#blocknewproducts1_reload').addClass('active').prepend($('.newproduct_ajax_loader').html()); 
     $('#blocknewproducts1').css('opacity', '0.7'); 
     e.preventDefault(); 
     $.ajax({ 
      type: 'POST', 
      headers: { "cache-control": "no-cache" }, 
      url: baseDir + 'modules/blocknewproducts1/newproduct_ajax.php', 
      async: true, 
      cache: false, 
      dataType : "json", 
      data: 'ajax_new_product=1&p=1&id_category='+$(this).attr('data-id'), 
      success: function(jsonData,textStatus,jqXHR) 
      { 
       $('#blocknewproducts1').html(''); 
       $('#blocknewproducts1').html(jsonData.blocknewproduct); 
       $('#blocknewproducts1').css('opacity', '1'); 
       $(function() { 
        Grid.init(); 
       }); 
      } 
     }); 
    });

источник

2017-02-16 08:39:04

Я фактически попробовал это, но это не сработало. Я думаю, это потому, что код для вызова успеха включен в голову, а не до конца тела, где ожидается расширение кода предварительного просмотра. Я также скопировал весь код вызова успеха до конца тела, добавив функцию, как вы делали выше, но она тоже не работала. – atsngr

Это может показаться глупым, но можно ли вставить код, который вы предложили выше, таким образом, чтобы этот аспект его срабатывал только в конце тела, как исходный код? – atsngr

Нет, события, которые нужно активировать, должны быть помещены в обратный вызов кода, вы можете попробовать использовать функцию, а затем называть ее –

Инициализировать jquery снова после замены списка с помощью ajax-вызова

ответ

Смежные вопросы