IE8 - 复选框在第一次点击时不改变状态答案

【问题标题】：IE8 - checkbox not changing state on first clickIE8 - 复选框在第一次点击时不改变状态
【发布时间】：2018-05-10 02:23:44
【问题描述】：

我已经搜索了一些，但未能找到与我的具体问题相关的内容，如果在其他地方得到解答，我深表歉意。

我正在使用带有 javascript 和 jQuery(1.7.2) 的内容编辑器 webpart 的 sharepoint 2010 站点来构建可以使用多个复选框进行过滤的表格显示。该表整理了来自多个后端列表的数据，我在页面加载时查询这些数据并将其存储到数据结构中以从中构建表。浏览器是IE11，运行在IE8强制仿真模式

我遇到了一个问题，虽然某些复选框在第一次点击时不会改变它们的状态，但是点击事件处理程序仍然会触发并且该方法仍然正确地确定当前状态。

代码如下所示（由于实际代码很长，因此改写了）

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>

当我运行页面时，在加载时它正确地将打开的项目附加到表中。但是，当我单击“打开”复选框以取消选中它并隐藏打开的项目时，该复选框会触发 onclick 事件并运行，但状态不会改变，类似于

页面加载，打开复选框被选中，仅附加打开的项目
点击打开复选框
打开复选框仍处于选中状态，onclick 处理程序触发并且filterActivity() 运行
$("#open_check").is(":checked") 返回 true 并且仅将打开的项目再次附加到表中
点击打开复选框
打开复选框变为未选中
从此时起按预期正确行为

这似乎只影响专门运行filterActivity() 方法的复选框，页面上的其他复选框工作正常。它也不一致，因为在极少数情况下，复选框会在第一次点击时正确更改状态。

据我所知，这是某种竞争条件，但我不确定是什么原因造成的 - IE8 管理点击处理程序的方式是否存在阻塞行为？我认为这也不是 jQuery 问题，因为我没有使用 jQuery 设置复选框，并且 jQuery 确定的状态似乎与显示的一致。

因为这也是一个遗留系统，很遗憾我没有选择使用更新的浏览器或更新版本的 jQuery。

【问题讨论】：

至少发布有效代码！！ SyntaxError: missing } after function body
我的错，添加了缺少的大括号（以及缺少的</table>）
当然，在 jsfiddle 中测试是不可能的——因为甚至 jsfiddle 都不支持 IE8！是否有任何控制台错误？我会用各种 console.log 乱扔代码，看看发生了什么！
我发现了我不知何故错过的问题 - 但我不小心通过其他地方的错误 jQuery 选择器绑定了一个额外的处理程序，这导致受影响的复选框运行 2 个事件

标签： javascript jquery checkbox sharepoint-2010 ie8-compatibility-mode

【解决方案1】：

我很傻，只见树木不见森林

在页面的其他地方，我正在动态创建一些复选框并将点击处理程序与 jQuery 绑定，但是我使用了选择器 $('input:checkbox')，它错误地将额外的点击处理程序绑定到受影响的复选框。

更改选择器以排除非编程生成的复选框解决了问题

【讨论】：