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

Answer 2

使用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
});

现在您可以像平常一样使用更改事件.

编辑:添加了对focus()的调用以防止可访问性问题(请参阅下面的Bobby评论).

Answer 3

你有没有尝试过IE的onpropertychange事件？我不知道它是否有所作为,但它可能值得一试.当通过JS代码更新值时,IE不会触发更改事件,但在此实例中,onpropertychange可能会起作用.

$("#viewByOrg").bind($.browser.msie? 'propertychange': 'change', function(e) {
  e.preventDefault(); // Your code here 
}); 

Answer 4

这也应该有效:

$(document).ready(function(){
   $(".hiddenOnLoad").hide();
   $("#viewByOrg, #viewByProduct").bind(($.browser.msie ? "click" : "change"), function () {
                        $(".visibleOnLoad").show();
                        $(".hiddenOnLoad").hide();
                    });
});

谢谢码头.这非常有帮助.

Answer 5

在IE中,您必须在其他浏览器中使用click事件.你的功能可能会变成

$(document).ready(function(){
   $(".hiddenOnLoad").hide();
   var evt = $.browser.msie ? "click" : "change";
   $("#viewByOrg").bind(evt, function () {
                        $(".visibleOnLoad").show();
                        $(".hiddenOnLoad").hide();
                    });

   $("#viewByProduct").bind(evt, function () {
                        $(".visibleOnLoad").hide();
                        $(".hiddenOnLoad").show();
                    });     
});

Answer 6

添加此插件

jQuery.fn.radioChange = function(newFn){
    this.bind(jQuery.browser.msie? "click" : "change", newFn);
}

然后

$(function(){
    $("radioBtnSelector").radioChange(function(){
        //do stuff
    });
});