在jquery中单击1次，但多次发出警报
在jquery中单击1次，但多次发出警报
提问于 2020-03-12 13:48:14
我在下面运行代码，单击打开5次，单击关闭4次，然后单击警报。我期望警报函数运行1次，但它运行5次为什么？，如何防止这个问题？
代码包含三个按钮，通过单击打开，显示两个按钮，包括close和警报按钮，单击close隐藏警报< code >E 217和E 118closeE 219按钮，并单击e 120警报E 221，警告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>回答 1
Stack Overflow用户
发布于 2020-03-12 14:13:57
你把$(".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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60655489
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号