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>
