Live() click event not firing on checkbox in IE
I find that the live() click event will only fire if it's added before events on other elements in internet explorer (I'm using 7). I don't have access to my webserver right now since I'm at work, but below is some short simple code to reproduce. As it is right now, the click events on the checkboxes won't fire. If you swap the second part with the first part in the javascript though, the click events will fire and the textbox change event still works as well. So there is a workaround for me, but this is some odd behavior. Works fine either way in Firefox, but in IE7 it has to be ordered right.
The page:
<html>
<head>
<script src="jquery-1.4.2.min.js" language="javascript" type="text/javascript"></script>
<script src="jquery_live_error.js" language="javascript" type="text/javascript"></script>
</head>
<body>
<form name="xxx">
<h3>Table with checkboxes</h3>
<table cellspacing="2" cellpadding="2" align="left" id="TASKS_table">
<tbody><tr>
<td><input type="text" value="000" size="5" maxlength="3" name="ACTIVITY_ID"></td>
<td width="60px" style="text-align: center;"><input type="checkbox" name="ACTIVITY_STATUS_CHECKBOX"></td>
<td width="55px" style="text-align: center;"><input type="checkbox" name="ACTIVITY_USER1_CHECKBOX"></td>
</tr>
<tr>
<td><input type="text" value="CLO" size="5" maxlength="3" name="ACTIVITY_ID"></td>
<td width="60px" style="text-align: center;"><input type="checkbox" name="ACTIVITY_STATUS_CHECKBOX"></td>
<td width="55px" style="text-align: center;"><input type="checkbox" name="ACTIVITY_USER1_CHECKBOX"></td>
</tr>
</tbody></table>
</form>
</body>
</html>
The javascript:
$(document).ready(function() {
//----------------------- first part -------------------------
$("#TASKS_table input[name='ACTIVITY_ID']").live("change", function() {
var regex = /^[0-9A-Za-z]+$/;
if (!regex.test($(this).val()) || $(this).val().length != 3) {
alert('The task id must be three alphanumeric characters.');
$(this).val('');
return;
}
var aTaskIds = $("#TASKS_table input[name='ACTIVITY_ID']").not(this).map(function() {
return $.trim($(this).val().toUpperCase());
});
if ($.inArray($.trim($(this).val().toUpperCase()), aTaskIds) != -1) {
alert('This task is already in the table');
$(this).val('');
}
else
$(this).val($(this).val().toUpperCase());
});
//----------------------- second part ------------------------
$("input[name='ACTIVITY_STATUS_CHECKBOX']").live("click", function() {
alert('hey');
});
$("#TASKS_table input[name='ACTIVITY_USER1_CHECKBOX']").live("click", function() {
alert('hey');
});
//----------------------------------------------------------------
});