jquery click() working inconsistently
I am trying to perform input validation on a user click. However the jQuery click() function has been working inconsistently; sometimes it acts like I expect it to and sometimes clicking on the link does nothing except move the viewport to the top of the screen. The problem is that I cannot consistently replicate the error; sometimes it works and sometimes it doesn't. I've reproduced it on both Firefox in Windows XP and Chrome 9.0 on Mac, however, sometimes the page will work, and sometimes it won't. One time when it loaded incorrectly I tried clearing the cache, and loading the page again, and the page still did not load. It appears to go from not loading to loading especially after large changes to the file.
I set up a reduced test case here: http://kburke.org/thesis/consentform1.php. If the form works correctly it should display an alertbox. Here is the code:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#submitlink").click(func开发者_如何学Gotion(){
console.log("link clicked");
alert("Clicked!");
});
console.log("loading...");
});
</script>
</head>
<body style="width:35em; margin-bottom:200px;">
<input type="text" value="" name="part_name" id="name1" />
<input type="text" value="" name = "part_name2" id="name2" />
<input type="checkbox" name="accept_1" id="accept_1" />I signify my agreement that all matters and issues mentioned above have been discussed to my satisfaction and agreement. <br><br>
<input type="checkbox" name="accept_2" id="accept_2" />I acknowledge that I am 18 years of age or older on the date of signing this consent, and that I have read and understood all of the above.</p>
<div id="submitlink" style="float:right; color:blue; text-decoration:underline; cursor:pointer;">I agree</div>
<form method="post" id="agree" action="/thesis/instructions.php">
<input type="hidden" name="id" id="nextpage" value="">
<input type="hidden" name="name" id="the_name" value="" />
</form>
</body>
</html>
Thank you for any insight you might have, I am baffled especially that the behavior is inconsistent.
Edit: It was suggested that console.log was causing the problems, but I am continuing to have problems after removing console statements. Running Chrome's JS debugger suggests that the code inside the $("#submitlink") call is not running at all when the problem occurs. As usual I appreciate your help.
I noticed that you had some console.log() statements in your code. What I also noticed is that when I had Firebug open, your code worked. When I had Firebug turned off, the code didn't work.
The console object is not part of JavaScript itself; it's created by Firebug (and many other debugging tools) to replace the bulk alert method of debugging. When Firebug was off, the console.log() lines produced fatal errors, which stopped your JavaScript from executing.
I solved the problem. The Google Voice Chrome Extension was adding a link to the phone number on the page, which was interfering with the jQuery action. Significant testing, both removing the element on the page and disabling the Chrome extension verified that the extension was causing the problem.
Next time I'll try to remember to disable all extensions to see if one is causing the problem.
I filed a bug report here: http://code.google.com/p/chromium/issues/detail?id=64019
remove console.log, as console.log wont be available always
加载中,请稍侯......
精彩评论