javascript - 对 jquery 虚拟表单执行的多个事件(隐藏/显示)
问题描述
这是我的情况的淡化版本。简而言之,每次我隐藏/显示我的 div 时都会激活多个事件。
我正在为我的代码添加一个jsfiddle,但这就是问题所在:
- 单击显示按钮,您将获得一个虚拟的隐藏表单。
- 您单击 Departed,您会注意到控制台显示:departed (so far so good.
One click One message
)。 - 您单击隐藏 - 表单变暗
- 您再次单击显示并再次单击 Departed 按钮 -->问题:控制台显示两次“已离开”(再次隐藏并再次显示,您将获得 3 次,依此类推)。我希望它只显示一次(单击一个控制台事件)。
我怀疑隐藏(也许?)不是正确的功能。我试过分离/删除,但我看不到表格。我还添加了“return false”,但问题仍然存在。
class XBox
{
show()
{
$('.tpbox').show();
}
hide()
{
$('.tpbox').hide();
return false;
}
setButtons()
{
$( "#div-tpbox-departed" ).on( "click", function() {
console.log("departed");
return false;
});
$( "#div-tpbox-hide" ).on( "click", function() {
$('.tpbox').hide();
return false;
});
}
}
let xbox = new XBox()
function activate()
{
xbox.show();
xbox.setButtons();
}
和 HTML
<button class="btn" onclick='activate()'>show</i></button>
<table width="100%">
<a href="#"><i class="fa fa-close fa-2x" style="color:red" onclick="xbox.hide();"> </i></a>
<div id='div-tpbox-departed' class="btn btn-primary ">Departed</div>
<div id='div-tpbox-hide' class="btn btn-primary ">hide</div>
<BR>
</div>
解决方案
每次单击时,show
您都在调用xbox.setButtons();
添加新的事件监听器。这意味着如果您只是单击show
了很多次,您就会向Departed
按钮添加更多事件侦听器。
解决此问题的最佳方法是仅设置一次事件侦听器:
function activate()
{
xbox.show();
}
// init
xbox.setButtons(); // remove this from the activate function and call it once.
class XBox {
show() {
$(".tpbox").show();
}
hide() {
$("#div-tpbox-departed").off("click");
$(".tpbox").hide();
return false;
}
setButtons() {
$("#div-tpbox-departed").on("click", function() {
console.log("departed");
return false;
});
$("#div-tpbox-hide").on("click", function() {
$(".tpbox").hide();
return false;
});
}
}
let xbox = new XBox();
function activate() {
xbox.show();
}
xbox.setButtons();
#tpbox-dynamic {
width: 250px;
line-height: 25px;
background: rgba(0, 0, 0, 0.2);
left: 55px;
top: 75px;
position: absolute;
z-index: 500 !important;
-ms-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#tpbox-dynamic.minimize {
height: 50px;
line-height: 5px;
}
#tpbox-dynamic h1 {
margin-right: 5px;
color: #fff;
font-size: 20px;
font-family: 'Roboto Condensed', sans-serif;
margin-left: 5px;
-ms-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#tpbox-dynamic.minimize h1 {
font-size: 20px;
text-align: center;
}
#tpbox-dynamic p {
color: #ccc;
font-size: 15px;
line-height: 1.4;
margin-left: 5px;
font-family: 'Roboto Condensed', sans-serif;
-ms-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#tpbox-dynamic.minimize p {
font-size: 0px;
}
#tpbox-dynamic small {
color: #ccc;
font-size: 11px;
font-family: 'Roboto Condensed', sans-serif;
margin-left: 5px;
margin-top: 0;
-ms-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#tpbox-dynamic.minimize small {
font-size: 10px;
margin-right: 5px;
float: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn" onclick='activate()'>show</i></button>
<div class="tpbox" style="display:none">
<div id="tpbox-dynamic">
<table width="100%">
<a href="#"><i class="fa fa-close fa-2x" style="color:red" onclick="xbox.hide();"> </i></a>
<div id='div-tpbox-departed' class="btn btn-primary ">Departed</div>
<div id='div-tpbox-hide' class="btn btn-primary ">hide</div>
<BR>
</div>
</div>
推荐阅读
- entity-framework - EF Core 在静态类中强制 AsNoTracking
- css - 如何在手机上显示全宽图像
- node.js - 将 avro 消息推送到 kafka 主题
- swift - 在表格视图中显示 Firebase 数据
- python - Django 测试 Http404 异常导致进一步的 NoReverseMatch
- javascript - 如何修复 TypeError: (0, _fetchNews.getHomeNews) 不是 React Native 中的函数?
- android - 谷歌文本识别错误 Android Studio
- flutter - Flutter - 转到下一个屏幕后显示 FloatingActionButton
- xaml - 为 Unity+UWP 添加广泛的文件系统访问功能
- powershell - Powershell 对事件 ID 4625 进行计数和分组?