WordPress Slider Revolution双滑块联动jQuery点击失效问题

问题背景 #

• 使用环境：WordPress + Slider Revolution 插件
• 现有配置：页面部署两个并排独立滑块，其一为服务名称、服务介绍展示滑块，其二为纯图片轮播滑块
• 预期交互：点击服务介绍滑块的导航圆点时，自动触发图片滑块同序号导航圆点的点击动作，实现双滑块同步切换

问题复现 #

初始编写的jQuery联动代码如下，测试发现无法捕获导航圆点的原生点击事件，绑定完全不生效：

jQuery(document).ready(function( $ ) {
   $("#rev_slider_3_2_wrapper .ares .tp-bullet:nth-child(2)").on("click", function() {
      $("#rev_slider_5_1_wrapper .ares .tp-bullet:nth-child(2)").trigger("click");
});

对照测试代码如下，验证确认.trigger("click")主动触发导航圆点点击的逻辑可正常运行，仅直接绑定原生点击事件失效：

$(".fusion-button.button-1").on("click", function() {
   $("#rev_slider_3_2_wrapper .ares .tp-bullet:nth-child(2)").trigger("click");
   alert("button clicked");
});

失效原因 #

Slider Revolution的导航圆点.tp-bullet是插件初始化完成后动态插入DOM的元素，且插件内部会拦截元素上的原生click事件冒泡：

1. 在document.ready阶段直接给元素绑定事件时，导航圆点还未被渲染到DOM树，jQuery找不到目标元素，绑定自然无效
2. 即便等元素渲染完成再绑定，插件内部的事件处理逻辑会阻止click事件向上冒泡，常规绑定的监听函数无法被触发

可行解决方案 #

方案1：调用插件官方API实现（优先推荐，稳定性最高） #

不要用模拟点击的绕路方案，直接监听滑块官方提供的切换回调，调用API触发另一滑块跳转，完全规避事件冲突问题，同步流畅度更好。
将以下代码加入主题自定义JS面板即可，注意对应自己的滑块ID调整参数：

jQuery(window).on('load', function(){
    // 确认两个滑块的API实例已加载
    if(typeof revapi3 === 'undefined' || typeof revapi5 === 'undefined') return;
    // 监听服务介绍滑块（ID为3，对应rev_slider_3_2_wrapper）的切换事件
    revapi3.on('revolution.slide.onchange', function(event, data) {
        // 直接调用图片滑块（ID为5，对应rev_slider_5_1_wrapper）的跳转方法，定位到对应序号幻灯片
        revapi5.revshowslide(data.slideIndex);
    });
});

说明：revapi后面的数字和滑块ID对应，代码里的rev_slider_3_2对应revapi3，rev_slider_5_1对应revapi5，如果后续调整滑块ID，同步修改这里的数字即可。该方案不需要单独给每个导航圆点绑定事件，拖动滑块、自动轮播、点击箭头切换的场景也能自动同步，比单独监听圆点点击逻辑更完整。

方案2：事件委托兜底方案（无法调用API时使用） #

如果找不到对应滑块的API实例，用事件委托的方式绑定事件，不要直接给动态生成的元素绑事件，将监听绑定到DOM加载时就存在的静态父节点（比如document）上，捕获所有匹配元素的点击动作，同时自动适配所有导航圆点，不需要逐个写选择器：

jQuery(document).ready(function( $ ) {
    // 委托事件到静态父节点，匹配所有动态生成的导航圆点
    $(document).on('click', "#rev_slider_3_2_wrapper .ares .tp-bullet", function() {
        // 获取当前点击的圆点序号，nth-child从1开始计数，index从0开始所以要+1
        const currentBulletIndex = $(this).index() + 1;
        // 触发另一滑块对应序号圆点的点击动作
        $("#rev_slider_5_1_wrapper .ares .tp-bullet:nth-child(" + currentBulletIndex + ")").trigger("click");
    });
});

注意：如果事件还是不生效，可以把监听的事件名从click改成mousedown，部分版本的Slider Revolution会在mouseup阶段阻止冒泡，mousedown阶段的事件会优先触发，不会被拦截。

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