IE8 - checkbox not changing state on first click

Question

I've searched around a bit and haven't been able to find something pertaining to my specific issue so apologies if this has been answered elsewhere.

I'm working on a sharepoint 2010 site using a content-editor webpart with javascript and jQuery(1.7.2) to build a tabular display that can be filtered using a number of checkboxes. The table collates data from a number of backend lists which I query on page load and store into a data structure to build the table from. The browser is IE11 running in IE8 forced emulation mode

I've run into an issue though that some of the checkboxes don't change their state on the first click, but the click event handler still fires and the method still correctly determines the current state.

The code looks something like below (paraphrased since the actual code is quite lengthy)

function filterActivity() {
  $('#displaytable').empty();

  //returns an array of keys sorted by the project's name
  //so that they appear in sorted order in display table
  //the key is sharepoint's internal listItem ID
  //but each project has an activity ID that uniquely identifies it
  var projectItems = sortByActivityName('projectDB');
  for (var i = 0; i < projectItems.length; i++) {
    var projectKey = projectItems[i];
    var projectItem = Lists['ProjectDB'][projectKey]; //get corresponding info from stored data

    var scheduleItems = sortByActivityName('scheduleDB');
    var endDate = '';
    for (var j = 0; j < scheduleItems.length; j++) {
      var scheduleKey = scheduleItems[j];
      var scheduleItem = Lists['ScheduleDB'][scheduleKey];

      if (projectItem.activity_ID == scheduleItem.activity_ID) {
        //get related records to the current project
        endDate = scheduleItem.endDate;
      }
    }
    //similar loops to get related records from other list

    var rowstring = "<tr>";
    if (projectItem.status == "Open" && $('#open_check').is(":checked")) {
      //if the project is open and the filter for showing open projects is checked, build the table row and append it
      rowstring += "<td>" + projectItem.displayName + "</td>";
      rowstring += "<td>" + endDate + "</td>";
      rowstring += "</tr>";
      $('#displaytable').append(rowstring);
    }
  }
}

<input type="checkbox" id="open_check" onclick="filterActivity()" value="Open" checked>
<table id="displaytable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Project End Date</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

When I run the page, on load it correctly appends only open projects to the table. However when I click on the "open" checkbox to uncheck it and hide open projects, the checkbox triggers the onclick event and runs, but the state doesn't change, something like

1. Page loads, Open Checkbox is checked, only open projects appended
2. Click open checkbox
3. Open checkbox remains checked, onclick handler fires and filterActivity() runs
4. $("#open_check").is(":checked") returns true and only open projects are appended to the table again
5. Click open checkbox
6. Open Checkbox Becomes unchecked
7. Correct behaviour as expected from this point onwards

This only seems to affect checkboxes which specifically run the filterActivity() method, other checkboxes on the page work fine. It's also inconsistent as on rare occasions the checkbox changes state correctly on the first click.

As far as I can tell this is some kind of race condition but I'm not sure what is causing it - is there a blocking behaviour with how IE8 manages the click handler? I don't think this is a jQuery issue either since I'm not using jQuery to set the checkbox and the state determined by jQuery seems to be consistent with what is shown.

Because this is a legacy system as well unfortunately I don't have the option to use a newer browser or newer versions of jQuery.

Answer 1

I'm silly and missed the forest for the trees

Elsewhere on the page I'm creating some checkboxes dynamically and binding the click handler with jQuery, however I used the selector $('input:checkbox') which erroneously binds an additional click handler to the affected checkboxes.

altering the selector to exclude the non-programmatically generated checkboxes resolved the issue