根据可见性绑定不同的事件

Question

我有一些我想根据框是否可见进行绑定的jQuery代码。 如果可见，则希望调用特定的函数。 如果看不到，我希望功能改变。 我有下面的代码，我相信理论上应该起作用。 我想念什么？

 if ($(box).is(':visible')) { $("#prev2").bind('click', test); } else{ $("#prev2").bind('click', test1); } $("#b").click(function () { $("#box").hide(); }); function test() { alert("clicked"); } function test1() { alert("clicked again!"); } 

 #box { position:absolute; width:100px; height:100px; background-color:black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button id="prev2">prev</button> <button id="next2">next</button> <br> <br> <button id="b">Button</button><br><br> <div id="box"></div><br> 

Answer 1

您应该首先取消绑定到元素的任何事件的绑定。 采用

if ($(box).is(':visible')) {
   $("#prev2").unbind('click');
   $("#prev2").bind('click', test);
} else{
   $("#prev2").unbind('click');
   $("#prev2").bind('click', test1);
}

上面将取消绑定任何事件并重新绑定新的处理程序。 隐藏该框后，您需要更改处理程序。

更新资料

以下小提琴显示了用户单击按钮后如何绑定事件。 该函数应运行一次，以便将初始事件绑定到该元素。 然后在div隐藏时重新运行。

在这件事上摆弄