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

Answer 7

我对输入文字有同样的问题。

我改变了：

$("#myinput").change(function() { "alert('I changed')" });

到

$("#myinput").attr("onChange", "alert('I changed')");

一切都适合我！

Answer 8

这是告诉IE在单击元素时触发change事件的简单方法：

if($.browser.msie) {
    $("#viewByOrg").click(function() {
        $(this).change();
    });
}

您可以将其扩展为更通用的内容以使用更多表单元素：

if($.browser.msie) {
    $("input, select").click(function() {
        $(this).change();
    });
    $("input, textarea").keyup(function() {
        $(this).change();
    });
}

Answer 9

我很确定这是IE的已知问题。为onclick事件添加处理程序应解决问题：

$(document).ready(function(){

    $(".hiddenOnLoad").hide();

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

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

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

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

Answer 10

点击工作的诀窍......但是如果你想获得正确的无线电或复选框状态，你可以使用它：

(function($) {
    $('input[type=checkbox], input[type=radio]').live('click', function() {
       var $this = $(this);
       setTimeout(function() {
          $this.trigger('changeIE'); 
       }, 10) 
    });
})(jQuery);

$(selector).bind($.browser.msie && $.browser.version <= 8 ? 'changeIE' : 'change', function() {
  // do whatever you want
})

Answer 11

如果将jQuery版本更改为1.5.1，则无需调整代码。然后IE9将倾听完美：

$(SELECTOR).change(function() {
    // Shizzle
});

http://code.jquery.com/jquery-1.5.1.min.js

Answer 12

从jquery 1.6开始这不再是一个问题..不确定它什么时候被修复了..虽然感谢上帝

Answer 13

在IE中，强制收音机和复选框以触发“更改”事件：

if($.browser.msie && $.browser.version < 8)
  $('input[type=radio],[type=checkbox]').live('click', function(){
    $(this).trigger('change');
  });

Answer 14

这可能对某人有所帮助：不是从表单的id开始，而是定位select id并在更改时提交表单，如下所示：

<form id='filterIt' action='' method='post'>
  <select id='val' name='val'>
    <option value='1'>One</option>
    <option value='2'>Two</option>
    <option value='6'>Six</option>
  </select>
  <input type="submit" value="go" />
</form>

和jQuery：

$('#val').change(function(){
  $('#filterIt').submit();
});

（显然，提交按钮是可选的，以防javascript被禁用）

Answer 15

//global
var prev_value = ""; 

$(document).ready(function () {

 if (jQuery.browser.msie && $.browser.version < 8)
      $('input:not(:submit):not(:button):not(:hidden), select, textarea').bind("focus", function () { 
         prev_value = $(this).val();

       }).bind("blur", function () { 
         if($(this).val() != prev_value)
         has_changes = true;
       });
}

Answer 16

试试这个，它对我有用

$("#viewByOrg")
        .attr('onChange', $.browser.msie ? "$(this).data('onChange').apply(this)" : "")
        .change( function(){if(!$.browser.msie)$(this).data('onChange').apply(this)} )
        .data('onChange',function(){alert('put your codes here')});

Answer 17

imo使用click而不是更改使ie行为不同。我宁愿使用计时器（setTimout）模拟更改事件行为。

类似（警告 - 记事本代码）：

if ($.browser.msie) {
  var interval = 50;
  var changeHack = 'change-hac';
  var select = $("#viewByOrg");
  select.data(changeHack) = select.val();
  var checkVal=function() {
    var oldVal = select.data(changeHack);
    var newVal = select.val();
    if (oldVal !== newVal) {
      select.data(changeHack, newVal);
      select.trigger('change')
    }
    setTimeout(changeHack, interval);
  }
  setTimeout(changeHack, interval);
}

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

Answer 18

尝试以下方法：

.bind($.browser.msie ? 'click' : 'change', function(event) {

Answer 19

在 jquery 的 .change <）功能之前，请避免使用 .focus（）或 .select（）对于IE，它工作正常，我在我的网站上使用它。

由于

Answer 20

请尝试使用每个而不是更改 / 点击，这在IE和其他浏览器中首次正常工作< / p>

第一次不工作

$("#checkboxid").**change**(function () {

});

第一次工作正常

$("#checkboxid").**each**(function () {

});

让jQuery识别IE中的.change（）

20 个答案: