我有一个可湿性粉剂的网站，其中有一个 AJAX 过滤器，我使用一些JavaScript代码运行的过滤器，这段代码工作正常时，页面加载，它不工作，一旦Ajax过滤器被激活。只有单击事件不起作用。
function addStoreLinkListeners() {
const store_url = document.querySelectorAll('.store-name-clickable .jet-listing-dynamic-link__link');
store_url.forEach(url => {
const parentItem = url.closest('.grid-name-clickable .jet-listing-grid__item');
if (parentItem) {
console.log("Adding click listener to parent item:", parentItem);
parentItem.addEventListener('click', (event) => {
console.log("Parent item clicked");
const clickedElement = event.target;
if (!clickedElement.closest('.preview-buttons')) {
event.preventDefault();
window.open(url.getAttribute('href'), '_self');
}
});
}
});
}
// Call the function once on page load
addStoreLinkListeners();
// Call the function again after each AJAX request is complete
jQuery(document).ajaxComplete(function() {
console.log("AJAX request complete");
addStoreLinkListeners();
});
1条答案
按热度按时间fnx2tebb1#
你没有公布你在DOM中添加项目的位置，所以这个答案可能需要调整。
但是从我所看到的，你拦截了所有 AJAX 请求，所以当过滤数据的数据请求完成时，你重新附加了“点击”事件。
问题是ajaxComplete事件发生在元素添加到DOM之前，因为JS将尝试运行重新连接“addStoreLinkListeners”的事件侦听器和将数据添加到DOM的事件侦听器。
作为一个时间图来帮助您可视化：
我建议，如果您可以访问将HTML元素替换为从服务器接收到的过滤数据的代码，请将对您的函数的调用添加到它的末尾。
如果你没有访问它，作为一种快速和肮脏的方式，添加一个setTimeout到你的事件侦听器，不需要有很多时间等待，但应该解决这个问题：