jquery - 让 jQuery 在 IE 中识别 .change()

Question

我正在使用 jQuery 在更改/单击单选按钮组时隐藏和显示元素。它在 Firefox 等浏览器中运行良好，但在 IE 6 和 7 中，仅当用户随后单击页面上的其他位置时才会发生此操作。

详细来说，当您加载页面时，一切看起来都很好。在 Firefox 中，如果您单击一个单选按钮，一个表格行会隐藏，而另一行会立即显示。然而，在 IE 6 和 7 中，您单击单选按钮，除非您单击页面上的某处，否则什么也不会发生。只有这样，IE 才会重新绘制页面，隐藏和显示相关元素。

这是我正在使用的 jQuery:

$(document).ready(function () {
  $(".hiddenOnLoad").hide();

  $("#viewByOrg").change(function () {
    $(".visibleOnLoad").show();
    $(".hiddenOnLoad").hide();
  });

  $("#viewByProduct").change(function () {
    $(".visibleOnLoad").hide();
    $(".hiddenOnLoad").show();
  });
});

这是它影响的 XHTML 部分。整个页面验证为 XHTML 1.0 Strict。

<tr>
  <td>View by:</td>
  <td>
    <p>
      <input type="radio" name="viewBy" id="viewByOrg" value="organisation"
      checked="checked" />Organisation</p>
    <p>
      <input type="radio" name="viewBy" id="viewByProduct" value="product" />Product</p>
  </td>
</tr>
<tr class="visibleOnLoad">
  <td>Organisation:</td>
  <td>
    <select name="organisation" id="organisation" multiple="multiple" size="10">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
    </select>
  </td>
</tr>
<tr class="hiddenOnLoad">
  <td>Product:</td>
  <td>
    <select name="product" id="product" multiple="multiple" size="10">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
    </select>
  </td>
</tr>

如果有人知道为什么会发生这种情况以及如何解决它，他们将不胜感激!

Answer 1

尝试使用 .click而不是 .change .