时间戳

首页 > 解决方案 > 在 jquery 中单击 1 次但多次提醒

javascript - 在 jquery 中单击 1 次但多次提醒

问题描述

我在下面运行代码，单击打开5 次并单击关闭4 次，然后单击警报。我希望警报功能运行 1 次，但它运行 5 次，为什么？，如何预防这个问题？

代码包含 3 个按钮，通过单击打开，显示两个按钮，包括关闭和警报按钮，通过单击关闭隐藏警报和关闭按钮，通过单击警报，警报 1。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".close-but").css("display","none");
    $(".alert").css("display","none");
  $(".open-but").click(function(){
    $(".alert").click(function(){
        alert("1");
    });    
    $(".open-but").css("display","none");
    $(".close-but").css("display","flex");
    $(".alert").css("display","flex");
 });
 $(".close-but").click(function(){
    $(".close-but").css("display","none");
    $(".alert").css("display","none");
    $(".open-but").css("display","flex");
 });
});
</script>
</head>
<body>

  <button class="open-but">open</button>
  <button class="close-but">close</button>
  <br/>
  <button class="alert">alert</button>
</body>
</html>

标签： javascriptjqueryhtml

解决方案

你放错$(".alert").click()
了每次你点击它都会为按钮.open-but分配一个事件处理程序。alert您应该只分配$(".alert").click()一次。所以把它放在$(".open-but").click()下面：

<!DOCTYPE html>
<html>

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
      $(document).ready(function() {
        $(".close-but").css("display", "none");
        
        $(".alert").css("display", "none");
        
        $(".open-but").click(function() {          
          
          $(".open-but").css("display", "none");
          $(".close-but").css("display", "flex");
          $(".alert").css("display", "flex");
        });
        
        $(".close-but").click(function() {
          $(".close-but").css("display", "none");
          $(".alert").css("display", "none");
          $(".open-but").css("display", "flex");
        });
        
        $(".alert").click(function() {
            alert("1");
          });
      });

    </script>
  </head>

  <body>

    <button class="open-but">open</button>
    <button class="close-but">close</button>
    <br />
    <button class="alert">alert</button>
  </body>

</html>

推荐阅读