Ajaxinate Endless scolling остановил продукт Быстрый просмотр с работы

Question

Я использую Shopify "Streamline Theme" с быстрым просмотром товара, и недавно я добавил бесконечную прокрутку к товарам в каждой коллекции, используя Ajaxinate. js.

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

Прокрутка Infinite работает отлично, и она отлично загружает новый продукт, но проблема возникает, когда новые продукты загружаются через AJAX вызов не работает с функцией быстрого просмотра.

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

function callBack(){
 theme.init();
 theme.initQuickShop();
};

document.addEventListener("DOMContentLoaded", function() {
var endlessClick = new Ajaxinate({
  method: "scroll",
  loadingText: 'Loading...',
  callback: callBack
});
});

Редактировать -------

Моя проблема в том, что при загрузке страницы в DOM загружаются только начальные элементы быстрого просмотра товаров. При нажатии кнопки прокрутки больше загруженные продукты загружаются без соответствующих элементов быстрого просмотра. Следовательно, быстрый просмотр не работает для них. Файл theme. js поставляется с этим кодом инициализации:

theme.reinitProductGridItem = function($scope) {
if (AOS) {
  AOS.refreshHard();
}

if (theme.settings.currenciesEnabled) {
  theme.currencySwitcher.ajaxrefresh();
}

// Reload quick shop buttons
theme.initQuickShop(true);

// Refresh reviews app
if (window.SPR) {
  SPR.initDomEls();SPR.loadBadges();
}

// Re-register product templates in quick view modals.
// Will not double-register.
sections.register('product-template', theme.Product, $scope);

// Re-hook up collapsible box triggers
theme.collapsibles.init();

};

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

function callBack(){
   ReloadSmartWishlist();
   var $container = $('#CollectionSection');
   theme.reinitProductGridItem($container);
  // I have tried the following init qith no success:
 // theme.init();
 // theme.initQuickShop(true);
 // theme.initQuickShop();
 //  sections.register('product-template', theme.Product, $container);
// AOS.refreshHard();

};

document.addEventListener("DOMContentLoaded", function() {
  var endlessClick = new Ajaxinate({
    method: "click",
    loadingText: 'Loading...',
    offset: 0,
    callback: callBack
  });
});

Я что-то упустил, но что? : / Примечание для других вещей, таких как загрузка изображений товаров с помощью функции обратного вызова и списка желаний, работает как задумано ...

Answer 1

Когда вы загружаете элементы через AJAX и если события не прикреплены к родительскому элементу, который не удален из DOM, эти элементы не будут иметь прикрепленного к ним события.

Используемый термин здесь - делегирование события.

Вот пример неделегированного события:

document.querySelectorAll('a').addEventListener('click', function(){
 // Do something
})

Поскольку вы присоединяете событие к существующим элементам "a", если вы добавляете новый 'a' через AJAX, эти элементы не будут иметь события, так как Javascript уже прикрепил все события, и он не будет повторно присоединен к ним, если вы не вызовете их снова.

---

Вот пример делегированного события:

document.querySelector('body').addEventListener('click', function(target){
    let target = event.target;
    if (target.tagName === 'A'){
        // Do something here
    }
})

Где мы прикрепляем событие к тегу body (где лучше прикрепить его к ближайшему неизмененному родителю) элемент ajax элементов), и когда мы щелкаем, мы проверяем, является ли наш целевой тег "a", и делаем что-то потом.

---

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