让jQuery识别IE中的.change()

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (15)

当更改/单击单选按钮组时,我使用jQuery隐藏和显示元素。它在Firefox等浏览器中运行良好,但在IE6和7中,只有当用户单击页面上的其他地方时,才会发生此操作。

详细说明一下,当您加载页面时,一切看起来都很好。在Firefox中,如果单击单选按钮,一行表将被隐藏,另一行将立即显示。但是,在IE6和7中,单击单选按钮,直到单击页面上的某个位置,才会发生任何事情。只有这样,IE才会重新绘制页面,隐藏并显示相关元素。

下面是我使用的jQuery:

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

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

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

以下是它影响的XHTML部分。整个页面验证为XHTML1.0严格。

<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>

如果有人有任何想法,为什么会发生这种情况。

提问于
用户回答回答于
用户回答回答于

使用click事件而不是change如果选择了相同的无线框(即实际上没有改变),将得到事件。如果检查新值与旧值是否不同,则可以将其过滤掉。我觉得有点烦人。

如果使用change事件,可能会注意到,在单击IE中的任何其他元素后,它将识别更改。如果你打电话blur()click事件,它将导致change事件以触发。

// This is the hack for IE
if ($.browser.msie) {
  $("#viewByOrg").click(function() {
    this.blur();
    this.focus();
  });
}

$("#viewByOrg").change(function() {
  // Do stuff here
});

扫码关注云+社区