让 jQuery 在 IE 中识别. change()

当单选按钮组被修改/单击时，我使用 jQuery 来隐藏和显示元素。它在像 Firefox 这样的浏览器中工作得很好，但是在 IE6和 IE7中，只有当用户点击页面上的其他地方时才会出现这个动作。

详细说明一下，当您加载页面时，一切看起来都很正常。在 Firefox 中，如果单击一个单选按钮，将隐藏一个表行，并立即显示另一个表行。然而，在 IE6和 IE7中，你点击单选按钮，除非你点击页面上的某个地方，否则什么都不会发生。只有这样 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严格。

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

如果任何人有任何想法为什么会发生这种情况，如何解决它，他们将非常感激！

93973 次浏览
小开
最佳答案

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

小开

我很确定这是 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();
});
});
小开

在 IE 中必须使用 click 事件，在其他浏览器中使用 onchange。 你的功能可能会变成

$(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();
});
});
小开

这种做法也应该奏效:

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

谢谢你，皮尔，这很有帮助。

小开

使用 click事件而不是 change事件的问题在于，如果选择了相同的单选框(即实际上没有更改) ，就会得到该事件。如果检查新值是否与旧值不同，则可以过滤掉这个值。我觉得这有点烦人。

如果您使用 change事件，您可能会注意到，当您单击 IE 中的任何其他元素时，它将识别出更改。如果在 click事件中调用 blur()，它将导致触发 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 的评论)。

小开

使用 click 而不是 change 的 imo 使得 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
});
小开

你试过 IE 的 onproperty 变更事件吗？我不知道这是否有区别，但它可能是值得一试。当通过 JS 代码更新值时，IE 不会触发变更事件，但是在这个实例中，onproperty 可能会起作用。

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

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

我变了:

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

到

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

对我来说一切都很好！

小开

这是一个简单的方法，告诉 IE 在单击元素时触发更改事件:

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

您可以将其扩展为更通用的形式，以处理更多的表单元素:

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

试试这个，对我有用

$("#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')});
小开

添加这个插件

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

那么

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

在 IE 中，强制单选框和复选框触发“更改”事件:

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

这可能对某些人有帮助: 不要从表单的 id 开始，而是将选择的 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 被禁用)

小开 
//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;
});
}
小开

从 jquery 1.6开始，这不再是一个问题。.不知道什么时候修好的。.谢天谢地

小开

如果将 jQuery 版本更改为1.5.1，则不必调整代码。然后 IE9将完美地听到:

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

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

小开

点击的技巧是有效的... 但是如果你想要得到正确的收音机或复选框的状态，你可以使用以下方法:

(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
})
小开

试试以下方法:

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

不要在 IE 使用 Jquery的 。变化()功能之前使用 。焦点()或者 。 select ()，这样就可以很好的工作了，我在我的网站上使用它。

谢谢

小开

请尝试使用 每个人而不是 改变/点击，它甚至在 IE 和其他浏览器中第一次都能正常工作

第一次不工作

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


});

第一次也没问题

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


});

提交答案