更换GeneratePress主题后jQuery点击函数触发两次问题求助

核心原因分析 #

切换到GeneratePress后出现点击事件重复触发，大概率是以下情况之一：

• 主题或插件重复引入了jQuery，导致事件绑定被执行多次
• 事件绑定代码被重复加载（比如主题钩子重复调用了脚本）
• 页面中存在多个#generatebtn元素（ID违反唯一性规则）
• 原代码每次点击都会新增#data元素，多次点击后DOM中存在多个同ID节点，引发后续逻辑异常

分步解决方案 #

1. 防止事件重复绑定

修改事件绑定逻辑，先解绑再绑定，确保同一事件只生效一次：

$("#generatebtn").off('click').on('click', function() {
  // 原函数内容保留
});

如果按钮是动态生成的，改用事件委托更稳妥：

$(document).off('click', '#generatebtn').on('click', '#generatebtn', function() {
  // 原函数内容保留
});

2. 修复#data元素重复创建的问题

原代码每次点击都会新增一个#datadiv，多次点击后DOM中会有多个同ID元素，导致后续操作混乱。在创建前先移除已存在的节点：

// 函数开头修改为：
$("#data").remove(); // 移除旧的data容器
$("<div>").attr("id", "data").appendTo("body");

3. 检查jQuery重复加载

打开浏览器开发者工具（F12），在Console面板执行：

console.log(jQuery.fn.jquery);

如果输出多个版本或重复的日志，说明jQuery被重复引入。需要检查主题设置或插件，禁用多余的jQuery加载。

4. 检查ID重复问题

在Elements面板搜索#generatebtn，确认页面中只有一个该ID的元素。如果有多个，修改为唯一ID或改用class选择器。

修改后的完整代码示例 #

$("#generatebtn").off('click').on('click', function() {
  $("#data").remove();
  $("<div>").attr("id", "data").appendTo("body");
  
  var a = new Array,
    e = $("#arrayA1").val(),
    t = $("#arrayA2").val(),
    l = $("#arrayA3").val(),
    r = $("#arrayA4").val(),
    n = $("#arrayA5").val(),
    y = $("#arrayA6").val(),
    s = $("#arrayA7").val(),
    d = $("#arrayA8").val(),
    c = $("#arrayA9").val(),
    o = $("#arrayA10").val();
  a.push(e), "" != t && a.push(t), "" != l && a.push(l), "" != r && a.push(r), "" != n && a.push(n), "" != y && a.push(y), "" != s && a.push(s), "" != d && a.push(d), "" != c && a.push(c), "" != o && a.push(o);
  
  var m = new Array,
    u = $("#arrayB1").val(),
    p = $("#arrayB2").val(),
    i = $("#arrayB3").val(),
    k = $("#arrayB4").val(),
    B = $("#arrayB5").val(),
    g = $("#arrayB6").val(),
    v = $("#arrayB7").val(),
    h = $("#arrayB8").val(),
    b = $("#arrayB9").val(),
    A = $("#arrayB10").val();
  m.push(u), "" != p && m.push(p), "" != i && m.push(i), "" != k && m.push(k), "" != B && m.push(B), "" != g && m.push(g), "" != v && m.push(v), "" != h && m.push(h), "" != b && m.push(b), "" != A && m.push(A);
  
  var E = new Array,
    I = $("#arrayC1").val(),
    C = $("#arrayC2").val(),
    f = $("#arrayC3").val(),
    x = $("#arrayC4").val(),
    L = $("#arrayC5").val(),
    M = $("#arrayC6").val(),
    T = $("#arrayC7").val(),
    H = $("#arrayC8").val(),
    w = $("#arrayC9").val(),
    N = $("#arrayC10").val();
  E.push(I), "" != C && E.push(C), "" != f && E.push(f), "" != x && E.push(x), "" != L && E.push(L), "" != M && E.push(M), "" != T && E.push(T), "" != H && E.push(H), "" != w && E.push(w), "" != N && E.push(N);
  
  console.log(m), console.log(E), console.log(a);
  let j = getAllCombinations([a, m, E]);
  
  var dataContainer = document.getElementById("data");
  dataContainer.innerHTML = ""; // 先清空内容再添加
  for (var q in j) {
    dataContainer.innerHTML += " &nbsp;";
    for (var z in j[q]) {
      dataContainer.innerHTML += j[q][z];
    }
  }
  var D = dataContainer.innerHTML.replace(",", "");
  dataContainer.innerHTML = D;

  // 原代码末尾的逻辑移到事件内部，避免页面加载时#data不存在报错
  var str = dataContainer.innerHTML,
  ress = str.split(" ");
  console.log(ress);
});

额外提示 #

原代码末尾的str和ress变量初始化会在页面加载时执行，此时#data元素还不存在，会导致控制台报错。建议把这段逻辑移到点击事件内部，或者添加存在性判断。

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