I am trying to make a form with some dynamic behavior. Specifically, I have my inputs in divs, and I would like to make it so when the user clicks anywhere in the div, the input is selected. I was using JQuery 1.2.6 and everything worked fine.
However, I upgraded to JQuery 1.3.2 and I am getting some strange behavior. When I click on any of the inputs, I get a delay before it is selected. My Firefox error console gives me several "too much recursion" errors, from within the JQuery library. I tried the page in Internet Explorer 7 and got an error saying "Object doesn't support this property or method". Am I doing something wrong, or is this a bug in JQuery? Does anyone know a way to fix this behavior, without going back to the old version? I am using Firefox 3.0.7 in case that matters. Here is a simple example I made to illustrate the problem: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// www.w3.org/TR/html4/loose.dtd"> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>quiz test</title> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> </head> <body> <div class='question'>Favorite soda? <div><input type='radio' name='q' value='A' id='a'><label for='a'>Coke</label></div> <div><input type='radio' name='q' value='B' id='b'><label for='b'>Pepsi</label></div> </div> <script type="text/javascript"> $(function() { $(".question div").click(function() { $(this).children("input").click(); }); }); </script> </body></html>