单个元素绑定两个jQuery点击事件自定义事件不触发如何解决？

问题根因 #

你遇到的事件未触发问题核心原因有两个：

1. 插件采用body级别的事件委托绑定点击事件，触发时机在事件冒泡阶段；你直接绑定到<a>元素的事件如果注册时目标DOM还未渲染完成，会绑定失效
2. 插件在宽度<900px的场景下会直接执行window.location.href跳转，很可能你的逻辑还没执行完成页面就已经跳转，导致看不到日志输出

可行解决方案（均无需修改插件代码） #

方案1：改用更靠近目标元素的事件委托（最推荐） #

利用事件冒泡「先触发近父级事件、后触发远父级事件」的特性，把你的事件绑定到比body更靠近目标链接的父节点.notificationsList上，同时可以直接用属性选择器筛选带read参数的链接，省略内部判断逻辑：

// 绑定到通知列表父节点，比body的插件事件更早触发
$('.notificationsList').on('click', 'a[href*="read="]', function(e) {
    e.preventDefault();
    console.log('clicked notification');
    // 你的自定义业务逻辑
    
    // 不需要插件逻辑执行就加下面这行，阻止事件冒泡到body
    // e.stopPropagation();
});

这个方案不受元素动态渲染、脚本加载顺序的影响，兼容性最好。

方案2：调整脚本加载顺序 #

在WordPress注册脚本时，把你的自定义脚本的加载优先级设置为低于插件脚本，保证绑定事件时目标DOM已经存在、且你的事件注册在插件事件之后：

• 用wp_enqueue_script注册脚本时，将第三个参数$deps设置为插件JS的注册句柄，或者将第五个参数$in_footer设为true，同时设置priority为99（数字越大加载越晚）
• 如果你需要完全阻止后续事件执行，可以在你的事件处理函数里加e.stopImmediatePropagation()

方案3：捕获阶段绑定事件（特殊场景用） #

如果因为站点配置问题无法调整加载顺序，可以用原生JS的捕获模式绑定事件，捕获阶段的事件会早于所有冒泡阶段的事件触发：

// 第三个参数true表示在捕获阶段触发事件
document.querySelector('.notificationsList').addEventListener('click', function(e) {
    const targetLink = e.target.closest('a[href*="read="]');
    if (targetLink) {
        e.preventDefault();
        console.log('clicked notification');
        // 你的自定义业务逻辑
        
        // 阻止事件继续冒泡，不会触发插件的绑定逻辑
        e.stopPropagation();
    }
}, true);

注意事项 #

• 如果你的业务逻辑执行完需要保留插件的跳转逻辑，不要加e.stopPropagation()，两个处理程序会按顺序执行
• 如果是移动端场景，你可以在自定义逻辑执行完成后，按需手动调用window.location.href = $(this).attr('href')实现跳转

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