使用jQuery时事件监听器触发两次的问题求助

我之前也碰到过一模一样的情况，这大概率是因为jQuery的$(document).ready()被执行了两次，导致你的事件监听器被重复绑定了两次，每次点击自然就触发两次回调啦。下面给你几个可行的解决方案：

方案一：改用jQuery的事件绑定（推荐） #

既然已经引入了jQuery，直接用它的事件绑定方法会更稳妥，jQuery会自动处理重复绑定的问题，代码也更简洁：

jQuery(document).ready(function($){
  function tioOverload(e){
    // 用jQuery的方法获取name属性，比原生写法更简洁
    var path = $(this).attr('name');
    $.ajax({
      url : ajax_object.ajaxurl,
      type : 'post',
      data : { path : path, action : "bpnsc_tio_enable" },
      success : function(data) {
        console.log('Success enabled ' + data);
      },
      error : function(data){
        console.log(data);
        console.log("failed");
      }
    });
  }
  
  // 用jQuery的.on()绑定事件，自动避免重复绑定
  $('.tio-enable').on('click', tioOverload);
});

方案二：给原生事件绑定添加once: true参数 #

如果你坚持要用原生的addEventListener，可以给绑定方法加上{ once: true }选项，确保事件只触发一次（现代浏览器均支持）：

jQuery(document).ready(function(){
  function tioOverload(e){
    var tioButton = e.explicitOriginalTarget;
    var path = tioButton.name;
    jQuery.ajax({
      url : ajax_object.ajaxurl,
      type : 'post',
      data : { path : path, action : "bpnsc_tio_enable" },
      success : function(data) {
        console.log('Success enabled ' + data);
      },
      error : function(data){
        console.log(data);
        console.log("failed");
      }
    });
  }
  var tioEn = document.getElementsByClassName("tio-enable");
  for (var i = 0; i < tioEn.length; i++) {
    // 添加once: true，确保事件仅触发一次
    tioEn[i].addEventListener('click', tioOverload, { once: true });
  }
});

方案三：排查ready重复执行的原因 #

你可以先在ready函数里加个日志，确认是不是被执行了两次：

jQuery(document).ready(function(){
  console.log('Ready函数执行了！');
  // 剩下的代码...
});

如果控制台输出两次，那说明是ready被重复触发了，大概率是WordPress中jQuery被重复加载，或者主题/插件里有重复的ready调用。你可以检查主题的functions.php或者插件代码，看看是不是多次引入了jQuery，或者有没有重复的$(document).ready()逻辑。

另外，你的PHP代码和HTML部分是没问题的，不用修改~

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