WordPress站点Ajax筛选后点击事件失效问题

你的问题核心是Ajax筛选后重复绑定事件导致的冲突，或者说逐个绑定的方式对动态生成元素的支持不够稳定。当前代码在页面加载和Ajax完成后都调用addStoreLinkListeners，会给已经存在的元素重复绑定多次点击事件，这会导致逻辑混乱，甚至让新元素的事件触发异常。

最优解决方案：事件委托 #

直接把点击事件绑定在父级（比如document）上，利用事件冒泡机制，不管元素是初始加载还是Ajax动态生成的，只要符合条件就能触发逻辑。这种方式不需要在Ajax后重复绑定，代码更简洁稳定：

// 只需要绑定一次，全程生效
document.addEventListener('click', function(event) {
  // 定位到目标父项
  const parentItem = event.target.closest('.grid-name-clickable .jet-listing-grid__item');
  // 排除预览按钮区域的点击，且确保父项存在
  if (parentItem && !event.target.closest('.preview-buttons')) {
    // 找到对应的店铺链接
    const storeLink = parentItem.querySelector('.store-name-clickable .jet-listing-dynamic-link__link');
    if (storeLink) {
      event.preventDefault();
      window.open(storeLink.getAttribute('href'), '_self');
    }
  }
});

用这个方案的话，你可以删掉原来的addStoreLinkListeners函数和ajaxComplete里的调用，只保留上面这段代码即可。

备选方案：修复重复绑定问题 #

如果你想保留原有逻辑，需要先移除旧事件再绑定新的，避免重复绑定。这里需要把点击事件抽成命名函数，并且存储函数引用以便移除：

// 抽离点击事件逻辑为命名函数
function handleStoreItemClick(linkElement) {
  return function(event) {
    const clickedElement = event.target;
    if (!clickedElement.closest('.preview-buttons')) {
      event.preventDefault();
      window.open(linkElement.getAttribute('href'), '_self');
    }
  };
}

function addStoreLinkListeners() {
  const storeLinks = document.querySelectorAll('.store-name-clickable .jet-listing-dynamic-link__link');
  storeLinks.forEach(link => { 
    const parentItem = link.closest('.grid-name-clickable .jet-listing-grid__item');
    if (parentItem) {
      // 移除之前绑定的事件（如果存在）
      if (parentItem.dataset.clickHandler) {
        parentItem.removeEventListener('click', parentItem.dataset.clickHandler);
      }
      // 创建新的事件处理函数并存储引用
      const clickHandler = handleStoreItemClick(link);
      parentItem.dataset.clickHandler = clickHandler;
      parentItem.addEventListener('click', clickHandler);
    }
  });
}

// 页面初始加载绑定
addStoreLinkListeners();

// Ajax完成后重新绑定
jQuery(document).ajaxComplete(function() {
  addStoreLinkListeners();
});

这个方案解决了重复绑定的问题，但代码量更大，维护成本比事件委托高，优先推荐第一种方案。

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