Javascript 在jquery中单击1次，但多次发出警报_Javascript_Jquery_Html

Javascript 在jquery中单击1次，但多次发出警报

javascript jquery html

Javascript 在jquery中单击1次，但多次发出警报,javascript,jquery,html,Javascript,Jquery,Html,我运行下面的代码，单击打开5次，单击关闭4次，然后单击警报。我期望警报功能运行1次，但它运行5次为什么？，如何防止此问题代码包含3个按钮，通过单击打开按钮，显示两个按钮，包括关闭按钮和警报按钮，通过单击关闭按钮隐藏警报按钮，通过单击警报按钮，警报1 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.m

我运行下面的代码，单击打开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>


$（文档）.ready（函数（）{
$（“.close but”）.css（“display”、“none”）；
$（“.alert”）.css（“显示”、“无”）；
$（“.open but”）。单击（函数（）{
$（“.alert”）。单击（函数（）{
警报（“1”）；
});    
$（“.open but”）.css（“display”、“none”）；
$（“.close but”）.css（“display”、“flex”）；
$（“.alert”）.css（“display”、“flex”）；
});
$（“.close but”）。单击（函数（）{
$（“.close but”）.css（“display”、“none”）；
$（“.alert”）.css（“显示”、“无”）；
$（“.open but”）.css（“display”、“flex”）；
});
});
打开
关闭


警觉的

您将

$（“.alert”）放错了位置。单击（）

每次点击

.open但

时，它都会为

警报

按钮分配一个事件处理程序。您应该分配

$（“.alert”）。只需单击一次（）。因此，请将其放置在$（“.open but”）之外。单击（）
，如下所示：


$（文档）.ready（函数（）{
$（“.close but”）.css（“display”、“none”）；
$（“.alert”）.css（“显示”、“无”）；
$（“.open but”）。单击（函数（）{
$（“.open but”）.css（“display”、“none”）；
$（“.close but”）.css（“display”、“flex”）；
$（“.alert”）.css（“display”、“flex”）；
});
$（“.close but”）。单击（函数（）{
$（“.close but”）.css（“display”、“none”）；
$（“.alert”）.css（“显示”、“无”）；
$（“.open but”）.css（“display”、“flex”）；
});
$（“.alert”）。单击（函数（）{
警报（“1”）；
});
});
打开
关闭


警觉的