Ajaxinate无休止的嘲笑已使产品快速查看停止工作

我正在使用Shopify的“流线型主题”和快速产品视图，最近我使用Ajaxinate.js为每个系列的产品添加了无限滚动条

当我打开一个收藏页面时，它会加载一些本该加载的产品，已经存在的产品可以很好地使用快速查看和快速添加到购物车中

无限滚动工作正常，加载新产品也很正常，但当通过AJAX调用加载的新产品无法使用快速查看功能时，问题就出现了

我尝试创建一个回调函数来激活快速查看，但没有成功，使用主题初始化代码也没有成功

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

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

编辑-------

我的问题是，当加载页面时，只有初始加载的产品quickview元素加载到DOM中。单击“滚动更多”按钮时，将加载新加载的产品，而不加载其各自的quickview元素。因此，quickview不适用于他们。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();

})

我尝试将其集成到回调中，但没有成功，quickview模式似乎没有为新加载的产品加载：

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
  });
});

我错过了什么，但是什么/

---

注意：对于使用回调和wishlist应用加载产品图像等其他事情，它会按预期工作…

当您通过AJAX加载元素时，如果事件未附加到未从DOM中删除的父元素，则这些元素将不会附加事件

这里使用的术语是事件委托

以下是未授权事件的示例：

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

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

因为如果通过AJAX添加新的“a”，那么将事件附加到现有的“a”元素，这些元素将不会有事件，因为Javascript已经附加了所有事件，并且如果您不再次专门调用它们，它将不会重新附加它们

---

以下是一个委托事件的示例：

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

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

我们将事件附加到body标记上（最好将其附加到ajax项的更接近的未修改父元素上），单击后，检查目标标记是否为“a”，然后执行一些操作

---

---

长话短说，您需要委派quick cart链接，以便在您通过AJAX加载项目后它能够工作。

您需要委派活动是正确的，但对于像我这样的人来说，很难完全理解如何这样做

我不确定quickview是如何构造的，但如果您使用.click函数打开它并可以使用jquery，请使用[.on（）函数][1]

例如：我使用一个单击按钮即可打开的快速视图。我的按钮连接到我的product-grid-item.liquid，带有以下代码：

---

感谢@drip的澄清。考虑到我所要实现的目标的特殊性，我正试图把我的脑袋绕在它周围。我编辑了我的主题，以便更好地解释我的问题。