Ajax 动态更新内容后，原本绑定在 DOM 元素上的事件（如 mouseenter/mouseleave）会失效，因为新插入的元素未重新绑定事件；正确做法是使用事件委托，将监听器绑定到静态父容器（如 body），并指定动态元素选择器。
ajax 动态更新内容后，原本绑定在 dom 元素上的事件（如 `mouseenter`/`mouseleave`）会失效，因为新插入的元素未重新绑定事件；正确做法是使用事件委托，将监听器绑定到静态父容器（如 `body`），并指定动态元素选择器。
在 WordPress 自定义主题开发中，通过 Ajax 实现分类筛选时，常会遇到「页面初始加载时功能正常，但 Ajax 刷新内容后交互失效」的问题。本例中的自定义光标提示（.animated-cursor 元素上的 data-cursor-title 悬停展示）正是典型场景：原始代码使用直接绑定方式：
$('.animated-cursor').on('mouseenter', function () { /* ... */ });
$('.animated-cursor').on('mouseleave', function () { /* ... */ });
该写法仅对执行时已存在于 DOM 中的元素生效；而 Ajax 成功返回新 HTML 并通过 $('.js-filter').html(result) 插入后，新生成的 .animated-cursor 元素并未被重新绑定事件，因此悬停无响应。
✅ 正确解法：事件委托（Event Delegation）
将事件监听器绑定到始终存在且不会被替换的祖先节点（如 body 或 .js-filter），并利用事件冒泡机制捕获目标子元素的触发行为。修改后的代码如下：
// ✅ 使用事件委托 —— 绑定到 body，监听动态生成的 .animated-cursor
$('body').on('mouseenter', '.animated-cursor', function () {
console.log('Tooltip triggered');
const dataTitle = $(this).attr('data-cursor-title');
$('.cursor-follower').html(dataTitle + '<br>').addClass('active');
});
$('body').on('mouseleave', '.animated-cursor', function () {
$('.cursor-follower').removeClass('active');
});
? 同理，若你有其他动态内容交互（如点击加载详情、懒加载按钮等），也应统一采用此模式，避免重复调用初始化函数或手动重绑事件。
⚠️ 注意事项：
- 不要将委托节点设为可能被 Ajax 替换的容器（例如 $('.js-filter').on(...) 是不安全的，因 .js-filter 内容被 html() 清空重置后，其事件监听器虽保留但逻辑易混乱）；
- 确保 follower 变量在委托作用域内可访问（推荐将其声明提升至闭包顶部，或直接使用 $('.cursor-follower')）；
- 若存在多个独立过滤区域，可考虑更精确的委托节点（如 $('.js-filter').on('mouseenter', '.animated-cursor', ...)），但需确保该容器本身不被整体替换。
? 补充建议：将所有依赖动态 DOM 的交互逻辑（包括光标移动、悬停、点击）统一收口到一个初始化函数中，并在 Ajax success 回调末尾显式调用（适用于复杂逻辑），但对简单悬停提示而言，事件委托是最简洁、高效且符合 jQuery 最佳实践的方案。
