如何在jQuery中禁用重复点击？解决元素切换后重复弹窗问题

嘿，我来帮你搞定这个重复弹窗的问题！

问题原因 #

你现在的代码里，每次点击div1或者div2时，都会给<p>元素新增一个click事件监听器——而不是替换掉之前的。比如先点div1，p上绑定了弹窗"p inside div1"的事件；再点div2，又给p加了弹窗"p inside div2"的事件。这时候点击p，两个事件都会触发，自然就会弹出多次提示框了。

另外还得提个小细节：你代码里div2的<a>标签没闭合，写成了<a href="#">div2</a，得改成<a href="#">div2</a>，不然可能影响页面结构哦。

方案一：绑定新事件前先解绑旧事件 #

每次给p绑定click事件前，先用off('click')移除之前所有的click事件监听器，这样就不会有重复绑定的问题了：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("p").hide();
  
  $(".div1").on("click",function(){
    $("p").show();
    // 先移除p上所有click事件，再绑定新的
    $("p").off('click').on('click', function(){
      alert("p inside div1");
    });
  });
  
  $(".div2").on("click",function(){
    $("p").show();
    // 同样先解绑再绑定
    $("p").off('click').on('click', function(){
      alert("p inside div2");
    });
  });
});
</script>
</head>
<body>
<div class="div1"><a href="#">div1</a></div>
<div class="div2"><a href="#">div2</a></div>
<p class="para">paragraph</p>
</body>
</html>

方案二：用变量跟踪来源（更高效） #

这种方法只给p绑定一次click事件，通过一个变量记录当前是从哪个div触发显示p的，点击p时根据变量判断弹窗内容，性能更好，也避免了重复绑定的问题：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("p").hide();
  let activeSource = ''; // 用来记录当前激活的来源div
  
  // 只给p绑定一次点击事件
  $("p").on('click', function(){
    if(activeSource === 'div1'){
      alert("p inside div1");
    } else if(activeSource === 'div2'){
      alert("p inside div2");
    }
  });
  
  $(".div1").on("click",function(){
    $("p").show();
    activeSource = 'div1'; // 更新来源为div1
  });
  
  $(".div2").on("click",function(){
    $("p").show();
    activeSource = 'div2'; // 更新来源为div2
  });
});
</script>
</head>
<body>
<div class="div1"><a href="#">div1</a></div>
<div class="div2"><a href="#">div2</a></div>
<p class="para">paragraph</p>
</body>
</html>

两种方案都能解决你的问题，方案二更推荐，因为它不需要频繁地绑定和解绑事件，代码逻辑也更清晰。

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