Ajaxinate Endless scoling停止了产品Quick View的工作

Question

我正在使用具有快速产品视图的Shopify“精简主题”，最近我使用Ajaxinate.js在每个系列的产品上添加了无限滚动。

[当我打开收藏页面时，它会加载某些应做的产品，已经存在的产品可以很好地工作，可以快速查看并快速添加到购物车，也可以。

[无限滚动可以正常工作，并且可以很好地加载新产品，但是当通过AJAX调用加载的新产品不能与快速查看功能一起使用时，会出现问题。

我已经尝试使用主题初始化代码创建一个回调函数来激活没有成功的快速视图，但是没有成功。

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

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

Answer 1

当您通过AJAX加载元素并且事件未附加到未从DOM中删除的父元素时，这些元素将不会具有附加事件。

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

这里是未授权事件的示例：

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

由于将事件附加到现有的“ a”元素上，如果您通过AJAX添加了新的'a'元素，则这些元素将不具有该事件，因为Javascript已经附加了所有事件，并且如果您未明确指定，则不会重新附加它们再次召回他们。

---

这是delegated事件的示例：

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

[将事件附加到body标签的位置（最好将其附加到ajax项目的未修改的父元素上），然后单击我们检查目标标签是否为“ a”并执行然后。

---

长话短说，您需要委派快速购物车链接，以便在通过AJAX加载项目后它可以工作。