[jQuery] Inifinite loop in IE
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
</head>
<body bgcolor="#ffffff" text="#000000">
<div class="moz-text-html" lang="x-western"> <font face="Trebuchet MS">Hi
Guys,
I've got a simple form with checkboxes. When someone checks the 'Other'
checkbox, a new checkbox is appended to the end of the list, so the
user can add as many "Other' fields as they like (code is below). I've
created a function that binds the click function to the class of the
'Other' checkboxes. After it has appened the new checkbox it then has
to call itself to rebind the click function to the new checkbox. This
is working great in FF, but in IE6 and IE7 I get an infinite loop and
it keeps adding checkboxes until I stop the script. Can anyone please
point out my mistake here?
</font><tt><html>
<head>
<title>Test</title>
<script
src=<a class="moz-txt-link-rfc2396E"
href="http://www.sitesuite.com.au/affiliate/js/jquery/jquery.js">"http://www.sitesuite.com.au/affiliate/js/jquery/jquery.js"</a>
type="text/javascript"></script>
<script>
var othercnt = 1;
function initOther() {
$(".otherfield").unbind("click").click(function() {
if ($(this)[0].checked == true) {
othercnt++;
$(this).parent().parent().append('<div id="other_' + othercnt
+ '"><input type=checkbox name=other class="otherfield">
Other: <input type=text name="validation_level" value=""
class="input othertext"></div>');
}
else
{
$(this).next(".othertext").val('');
var lastcount = othercnt;
var lastdiv = "#other_" + lastcount;
var lastfield = lastdiv + " .otherfield";
if ($(lastfield).checked != true) {
$(lastdiv).remove();
othercnt--;
}
}
initOther(); // re-initialise click function on new checkbox - THIS
IS THE PROBLEM
});
}
$(function(){
initOther();
});
</script>
</head>
<body>
<table>
<thead>
<tr><th>Validation Levels</th></tr>
</thead>
<tbody>
<tr>
<td >
<table width=100% cellpadding=0 cellspacing=0
border=0>
<tbody>
<tr>
<td>
<div><input type=checkbox
name=validation_level value="Basic">Basic</div>
<div><input type=checkbox
name=validation_level value="Standard">Standard</div>
<div><input type=checkbox
name=other class="otherfield"> Other: <input type=text
name="validation_level" value="" class="input othertext"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body></tt><font face="Trebuchet MS">
Regards,
David
</font>
</div>
</body>
</html>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/