如何使元素绑定两次click事件

一个元素不能绑定两次相同的事件，这一点在学习后端基础时便了解的事情。当时尝试过在一个元素中绑定click事件，然后再在此次的click事件中再嵌套多一层同类事件，结果当然是失败的，点击被绑定的元素时，只相应了第一次的click事件，第二层的click就像是根本没有定义一样，毫无效果。无可奈何之下，便只好用双击事件来替代二次点击事件，但是这样子做的后果会使用户体验效果变差。试想一下，当第一次点击按钮时隐藏域显示，这时给人展现的效果便是单击一次使其显示，单击两次按钮则使其隐藏，但若是第二次需要点击两次才能触发方法的话，那么给用户所带来的体验便是“不合理，不顺畅”的感觉。

//点击事件
$("").dblclick(function () {

});

//双击事件
$("").click(function () {
});

近期在完成新的项目时，又一次“幸运”的遇到了同样需要两次点击事件才能完成的页面效果，如下图所示：

需要达成的效果是，点击筛选按钮后使原本为隐藏状态的条件筛选模块显示出来，接着包裹着搜索、筛选盒子的样式&格式会跟随着发生改变。
条件筛选模块：
**盒子格式改变后：**去除搜索文本框以及搜索按钮，筛选按钮变为收起按钮。

既然再次遇到了当初未解决的难题，就应该迎难而上想办法解决它，不再用双击事件敷衍了事。关于如何使一个元素绑定两次点击事件，我找到了三种办法：

1.元素在执行完第一次点击事件后，删除该元素，然后动态创建一个元素，再给新创建的元素添加点击事件。但显而易见的是这个方式很麻烦，因此我并不打算使用。

2.使用jquery中的one()方法：为每一个匹配元素的特定事件绑定一个一次性的事件处理函数。在每个对象上，这个事件处理函数只会被执行一次。通过该方法为元素绑定一个一次性的事件处理函数，这样的话就无需担心同时绑定同类事件所引起的冲突：

$("").one(“click”,function (){

});

3.在每次为元素绑定点击事件前，先解除之前对元素的第一次事件绑定后，再为元素绑定事件。这就类似于先将绑定的元素先清空，再对元素进行操作一样。在使用bind()方法绑定时，可以用unbind()方法解除绑定。但我个人更喜欢用on()方法绑定事件，因为bind()方法已经不被推荐，因此用off()方法解除事件的绑定也是可以的：

$("#btnShaiXuan").unbind(“click”).bind(“click”, function () {
$("#btnShaiXuan").text(“收起”);
$("#search").prop(“style”, “display:none; margin-right:5px;”);
$("#tabShaiXuan").prop(“style”, “display:block;”)
});
$("#btnShaiXuan").off(“click”).on(“click”, function () {
$("#btnShaiXuan").text(“收起”);
$("#search").prop(“style”, “display:none; margin-right:5px;”);
$("#tabShaiXuan").prop(“style”, “display:block;”)
});
通过以上的三种方法都可以达到为元素绑定两次同类事件的效果，奉上功能完成后的效果图：