нажмите 1 раз, но несколько раз предупредите в jquery - PullRequest
0 голосов
/ 12 марта 2020

я запускаю приведенный ниже код, нажмите открыть 5 раз и нажмите закрыть 4 раза, затем нажмите alert . я ожидал, что функция оповещения запускается 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>

Ответы [ 2 ]

0 голосов
/ 12 марта 2020

Вы должны отделить функцию щелчка оповещения,

https://jsfiddle.net/e0r2d9uL/1/

событие щелчка оповещения не должно быть зависимым от события открытого щелчка, как

     $(".alert").click(function(){
        alert("1");
    });   

открытый клик должен понравиться

  $(".open-but").click(function(){
    $(".open-but").css("display","none");
    $(".close-but").css("display","flex");
    $(".alert").css("display","flex");
 });
0 голосов
/ 12 марта 2020

Вы потеряли $(".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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...