bind / unbind on timer not working in jquery. Will unbind but reactivating button fails
I have written some jquery in which I would like after the user clicks a button it deactivates for the duration of the animation then activates again. I have tried using call backs from the animation and now timers but I cannot get the function to bind again.
Any help would be much appreciated.
Here is the timer code
$("#full-slider-nav-left").click(function() {
$("#full-slider-nav-left").unbind("click");
setTimeout( function()
{
$("#full-slider-nav-left").bind("click");
}, 2000);
});
If this is not useful here is the pages code in full..
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmln开发者_运维问答s="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Full Page Slider</title>
<style type="text/css">
html {
min-width: 800px;
overflow:hidden;
background-image:url(images/testback.jpg);
background-repeat: repeat;
}
#full-slider-wrapper {
overflow: hidden;
}
#full-slider {
position: relative;
width: 800px;
height: 600px;
margin: 0 auto;
}
#full-slider .slide-panel {
position: absolute;
top: 0;
left: 0;
width: 800px;
height: 600px;
visibility: hidden;
}
#full-slider .slide-panel.active {
visibility: visible;
}
#full-slider-nav {
position: absolute;
top: 0;
right: 0;
}
#full-slider-nav-left, #full-slider-nav-right {
display: inline-block;
height: 0;
width: 0;
margin-left: 15px;
border: 40px solid transparent;
cursor: pointer;
}
#full-slider-nav-left {
border-right-color: #BBB;
}
#full-slider-nav-left:hover {
border-right-color: #999;
}
#full-slider-nav-right {
border-left-color: #BBB;
}
#full-slider-nav-right:hover {
border-left-color: #999;
}
/* styles below are only for this example */
#full-slider .slide-panel {
color: #DDD;
}
#threewheelerbtn{
cursor:pointer;
background:#FFF;
}
</style>
</head>
<div id="full-slider-wrapper">
<div id="full-slider">
<div class="slide-panel active">
<img src="../final pages/Main Morgan/images/lifecar.png" width="800" />Eva GT</div>
<div class="slide-panel"><br /><br /><br /><br /><br /><br />
<img src="images/threewheeler.png" width="800" />Morgan Three Wheeler
</div>
<div class="slide-panel">
<img src="../final pages/Main Morgan/images/lifecar.png" width="800" />
</div>
</div>
<div id="threewheelerbtn"> Click here for Three Wheeler</div>
</div>
<script type="text/javascript" src="js/jquery-1.4.3.min.js
"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
function slidePanel( newPanel, direction ) {
// define the offset of the slider obj, vis a vis the document
var offsetLeft = $slider.offset().left;
// offset required to hide the content off to the left / right
var hideLeft = -1 * ( offsetLeft + $slider.width() );
var hideRight = $(window).width() - offsetLeft;
// change the current / next positions based on the direction of the animation
if ( direction == 'left' ) {
currPos = hideLeft;
nextPos = hideRight;
}
else {
currPos = hideRight;
nextPos = hideLeft;
}
// slide out the current panel, then remove the active class
$slider.children('.slide-panel.active')
.stop(true).animate({left: currPos}, 800, 'easeInOutQuart',
function() {
$(this).removeClass('active');
});
// slide in the next panel after adding the active class
$( $sliderPanels[newPanel] ).css('left', nextPos).addClass('active').stop(true).animate({
left: 0
}, 800, 'easeInOutQuart', function() {
// Animation complete.
});
}
var $slider = $('#full-slider');
var $sliderPanels = $slider.children('.slide-panel');
var $navWrap = $('<div id="full-slider-nav"></div>').appendTo( $slider );
var $navLeft = $('<div id="full-slider-nav-left"></div>').appendTo( $navWrap );
var $navRight = $('<div id="full-slider-nav-right"></div>').appendTo( $navWrap );
var currPanel = 0;
$navLeft.click(function() {
currPanel--;
;
// check if the new panel value is too small
if ( currPanel < 0 ) currPanel = $sliderPanels.length - 1;
slidePanel(currPanel, 'right');
});
$navRight.click(function() {
currPanel++;
// check if the new panel value is too big
if ( currPanel >= $sliderPanels.length ) currPanel = 0;
slidePanel(currPanel, 'left');
});
//selects specific car
$('#threewheelerbtn').click(function() {
if(currPanel != 1){
currPanel = 1;
slidePanel(1, 'left');
}
});
$("#full-slider-nav-left").click(function() {
$("#full-slider-nav-left").unbind("click");
setTimeout( function()
{
$("#full-slider-nav-left").bind("click");
}, 2000);
});
});
</script>
</body>
</html>
When you re-bind the click event, you are not providing a function to execute.
$("#full-slider-nav-left").click(function() {
$("#full-slider-nav-left").unbind("click");
setTimeout(function() {
$("#full-slider-nav-left").bind("click", function() {
/* do something else */
});
}, 2000);
});
- 2019 Update -
The bind() and unbind() methods have now been deprectaed. With versions of jQuery 1.9+ you should use on() and off() instead:
$("#full-slider-nav-left").on('click', function() {
$("#full-slider-nav-left").off("click");
setTimeout(function() {
$("#full-slider-nav-left").on("click", function() {
/* do something else */
});
}, 2000);
});
I fixed the problem with this simple line of code inside of the bind call
e.stopImmediatePropagation();
so the full fix is this for two alternating binds
function dBind(){
$('.search-drawer').unbind();$('.search-circle').bind('click',function(e){e.stopImmediatePropagation();cBind(this);});alert("d ub c b");
}
function cBind(){
$('.search-circle').unbind();$('.search-drawer').bind('click',function(e){e.stopImmediatePropagation();dBind(this);});alert("c ub d b");
}
$('.search-drawer').bind('click',function(e){e.stopImmediatePropagation();dBind(this);});
$('.search-circle').bind('click',function(e){e.stopImmediatePropagation();cBind(this);});
加载中,请稍侯......
精彩评论