Bind and unbind is messing me up
When a user scrolls to the bottom of the Terms and Conditions it will remove a class on a#submit button, once you click a#submit it will remove the class disable on a#submitbutton. Everything sort of works, but it takes two clicks to get the first class removed, also if you don't scroll down, it will add a class highlight, that needs two clicks too! Why does it take two mouse clicks, I think it is the binding and my crappy code?
<style>
p {
padding: 0.25em;
}
#terms {
border: solid 1px;
height: 24em;
overflow: auto;
margin-bottom: 1em;
}
#termsInner {
padding: 0.5em 0;
}
.highlighted {
background-color: #ff0;
}
#submit {
color: blue;
text-decoration: underline;
}
</style>
<script type="text/javascript">
// Select the elements of the HTML page.
jQuery(document).ready(function() {
var instructions = jQuery('#instructions'),
terms = jQuery('#terms'),
termsInner = jQuery('#termsInner'),
submit = jQuery('#submit');
submit.bind('click', function() {
instructions.addClass('highlighted');
setTimeout(function() {
instructions.removeClass('highlighted');
}, 2000);
});
terms.scroll开发者_开发问答(function() {
if (terms.scrollTop() + terms.height() >= termsInner.height()) {
submit.unbind('click').bind('click', showTest);
jQuery("a#submit").removeClass("disablebtn");
}
});
function showTest() {
jQuery("a#submitbutton").removeClass("disablebtn");
jQuery("a#submit").removeClass("disablebtn");
jQuery('a#submit').click(function() {
jQuery("a#submitbutton").removeClass("disabled");
});
}
});
</script>
</head>
<body>
<p id="instructions">Please read these terms and conditions now. <b>You must scroll to the bottom before continuing.</b></p>
<div id="terms">
<div id="termsInner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet mauris rhoncus libero congue interdum a ac dolor. In tellus enim, vulputate nec rhoncus nec, sollicitudin non lorem. Nunc tempor massa nec nulla pulvinar et aliquet nibh semper. Quisque vulputate tortor quis ligula porttitor quis facilisis ipsum rutrum. Praesent sed posuere massa. Quisque et est ac magna bibendum scelerisque. Nunc eget velit ac arcu aliquet venenatis. Mauris porttitor, nunc nec scelerisque condimentum, nisl ipsum laoreet lorem, sed rutrum odio quam eu ligula. Praesent et mi justo, in tempus lacus. Suspendisse interdum adipiscing urna aliquam tempus. Vestibulum nec posuere nisi.
</p>
<p>
</div>
</div>
<a href="#" class="button disablebtn" id="submit">I Agree to CLEAR's Terms & Conditions</a>
<a href="#" id="submitbutton" class="subButton disabled">Submit</a>
This actually fixed the double click for a#submitbutton removing the class:
<script type="text/javascript">
terms.scroll(function() {
if (terms.scrollTop() + terms.height() >= termsInner.height()) {
jQuery("a#submit").removeClass("disablebtn");
submit.unbind('click').bind('click', showTest);
jQuery('a#submit').click(function() {
jQuery("a#submitbutton").removeClass("disabled");
});
}
});
function showTest() {
jQuery("a#submitbutton").removeClass("disablebtn");
jQuery("a#submit").removeClass("disablebtn");
}
</script>
Don't even bother with all the binding and unbinding. Just let your one event handler figure out what action is appropriate. You can use a simple boolean variable to keep track of whether the user has gotten to the bottom or not:
var scrolled = false;
terms.scroll(function() {
scrolled = true;
jQuery("a#submit").removeClass("disablebtn");
});
submit.bind('click', function() {
if (scrolled) {
showTest();
} else {
instructions.addClass('highlighted');
setTimeout(function() {
instructions.removeClass('highlighted');
}, 2000);
}
});
加载中,请稍侯......
精彩评论