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