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

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);
}

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

更新

以下 fiddle 显示事件如何在用户单击按钮时绑定。该函数应该是运行一次，以便将初始事件绑定到元素。然后当 div 被隐藏时它是 re运行.

Fiddle on the matter

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

bind different event based on visibility

jquery

bind