2010-11-05 42 views
2

當用戶滾動到條款的底部會在a#submit按鈕刪除類,一旦你點擊a#submit它會刪除類禁用a#submitbutton。所有類型的作品,但它需要兩次點擊才能刪除第一類,如果你不向下滾動,它會增加一個類的亮點,這也需要兩個點擊!爲什麼需要兩次鼠標點擊,我認爲這是綁定和我的蹩腳代碼?綁定和取消綁定是搞亂了我

<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> 

這實際上固定的#提交按鈕移除類雙擊:

<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> 

回答

0

不要即使所有的綁定和解除綁定打擾。讓你的一個事件處理程序找出適當的操作。您可以使用一個簡單的布爾變量來跟蹤用戶是否已經到達底部:

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

與雙擊相同的問題... – Xtian 2010-11-05 22:17:32