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

时间:2015-07-23 10:56:18

标签: jquery bind

我有一些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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

首先应取消绑定附加到元素的任何事件。使用

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

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

<强>更新

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

Fiddle on the matter