让jQuery识别IE中的.change()

当我更改/点击单选按钮组时,我正在使用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.

  View by:
  
    

      Organisation
    

      Product
  


  Organisation:
  
    
      Option 1
      Option 2
    
  


  Product:
  
    
      Option 1
      Option 2
    
  

如果有人有任何想法为什么会这样,以及如何解决它,他们将非常感谢!

1> Paolo Bergan..：

---

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

---

我的立场得到了纠正 - 看起来确实如此,但这可能是违反直觉的!

---

@samjudson,在我的测试中这是不正确的,当我使用箭头键选择下一个单选按钮时,jquery的点击会触发.(vista,ie7)

---

@samjudson:单击单选按钮上的事件,使用键盘选择复选框时也会激活复选框.适用于所有浏览器

---

我喜欢这也适用于键盘更改!

---

这似乎是这个特定问题最受欢迎的答案,但它并不完全正确!`click`与`change`的不同之处在于,当点击已经选择的选项时,也会调用它的eventhandler,而`change`则不会.[这个答案](http://stackoverflow.com/questions/1159046/jquery-change-event-on-an-input-element-any-way-to-retain-previous-value)有一个如何使用的例子jQuery [`.data`](http://api.jquery.com/data/)来比较旧值和新值.

2> Mark A. Nico..：

---

使用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评论).

---

但是可以通过调用focus()来解决可访问性问题.它至少和使用click()一样好.

---

这很好,但它会导致键盘可访问性问题.一旦blur()事件被触发,单选按钮就不再被聚焦,因此使用键盘在单选按钮之间移动变得非常尴尬.我目前的解决方案是添加对"this.focus();"的调用.紧接在blur()语句之后.

---

这是一个非常邪恶的黑客攻击,因为它会阻止用户使用键盘导航,因为选择单选按钮后焦点会消失.

3> 小智..：

---

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

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

4> 小智..：

---

这也应该有效:

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

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

5> Pier Luigi..：

---

在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();
                    });     
});

6> dovidweisz..：

---

添加此插件

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

然后

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