PrestaShop 1.7自定义JS在Ajax加载分类或筛选结果后不生效如何解决

问题根因 #

你最初写的代码是在页面首次加载完成后，仅给当时已经存在的.product-box元素绑定了hover事件。当你切换分类、触发筛选后，页面会通过Ajax加载新的商品列表，新渲染出来的.product-box元素没有经历过之前的绑定流程，所以悬停事件就不生效了。

解决方案 #

改用事件委托的方式绑定事件即可，不需要修改原有逻辑，只要把绑定方式替换成下面的代码就行：

// 你也可以把document换成离.product-box更近、不会被Ajax替换的父容器（比如.product-list、#products等），性能会更好
$(document).on('mouseenter', '.product-box', function(){
    $(this).addClass("current");
}).on('mouseleave', '.product-box', function(){
    $(this).removeClass("current");
});

说明 #

事件委托是利用JavaScript的事件冒泡机制，把事件绑定到页面初始化时就已经存在的上层元素上，后续不管是首次加载还是Ajax动态新增的.product-box元素，触发的事件都会冒泡到上层绑定的元素上，从而执行对应的逻辑，不用每次Ajax加载后重新绑定事件，也不会出现重复绑定的问题。

内容的提问来源于stack exchange，提问作者Chris