让 jQuery 在 IE 中识别 .change()
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/208471/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Getting jQuery to recognise .change() in IE
提问by Philip Morton
I'm using jQuery to hide and show elements when a radio button group is altered/clicked. It works fine in browsers like Firefox, but in IE 6 and 7, the action only occurs when the user then clicks somewhere else on the page.
当单选按钮组被更改/单击时，我使用 jQuery 来隐藏和显示元素。它在 Firefox 等浏览器中运行良好，但在 IE 6 和 7 中，该操作仅在用户单击页面上的其他位置时发生。
To elaborate, when you load the page, everything looks fine. In Firefox, if you click a radio button, one table row is hidden and the other one is shown immediately. However, in IE 6 and 7, you click the radio button and nothing will happen until you click somewhere on the page. Only then does IE redraw the page, hiding and showing the relevant elements.
详细说明，当您加载页面时，一切看起来都很好。在 Firefox 中，如果您单击一个单选按钮，一个表格行会被隐藏，而另一行会立即显示。但是，在 IE 6 和 7 中，您单击单选按钮，直到您单击页面上的某处才会发生任何事情。只有这样，IE 才会重新绘制页面，隐藏和显示相关元素。
Here's the jQuery I'm using:
这是我正在使用的 jQuery：
$(document).ready(function () {
$(".hiddenOnLoad").hide();
$("#viewByOrg").change(function () {
$(".visibleOnLoad").show();
$(".hiddenOnLoad").hide();
});
$("#viewByProduct").change(function () {
$(".visibleOnLoad").hide();
$(".hiddenOnLoad").show();
});
});
Here's the part of the XHTML that it affects. The whole page validates as XHTML 1.0 Strict.
这是它影响的 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>
If anyone has any ideas why this is happening and how to fix it, they would be very much appreciated!
如果有人有任何想法为什么会发生这种情况以及如何解决它，他们将不胜感激！
回答by Mark A. Nicolosi
The problem with using the clickevent instead of changeis you get the event if the same radio box is selected (i.e. hasn't actually changed). This can be filtered out if you check that the new value is different than the old. I find this a little annoying.
如果选择了相同的单选框（即实际上没有更改）click，change则使用事件而不是您会得到事件。如果您检查新值与旧值不同，则可以将其过滤掉。我觉得这有点烦人。
If you use the changeevent, you may notice that it will recognize the change after you click on any other element in IE. If you call blur()in the clickevent, it'll cause the changeevent to fire (only if the radio boxes actually have a changed).
如果您使用该change事件，您可能会注意到它会在您单击 IE 中的任何其他元素后识别更改。如果您blur()在click事件中调用，它将导致change事件触发（仅当单选框实际发生更改时）。
Here's how I'm doing it:
这是我的做法：
// This is the hack for IE
if ($.browser.msie) {
$("#viewByOrg").click(function() {
this.blur();
this.focus();
});
}
$("#viewByOrg").change(function() {
// Do stuff here
});
Now you can use the change event like normal.
现在您可以像平常一样使用更改事件。
Edit: Added a call to focus() to prevent accessibility issues (see Bobby's comment below).
编辑：添加了对 focus() 的调用以防止可访问性问题（请参阅下面的 Bobby 评论）。
回答by Kevin
Have you tried IE's onpropertychange event? I dont know if it makes a difference but it's probably worth a try. IE does not trigger the change event when values are updated via JS code but perhaps onpropertychange would work in this instance.
您是否尝试过 IE 的 onpropertychange 事件？我不知道它是否有所作为，但它可能值得一试。当通过 JS 代码更新值时，IE 不会触发更改事件，但也许 onpropertychange 在这种情况下会起作用。
$("#viewByOrg").bind($.browser.msie? 'propertychange': 'change', function(e) {
e.preventDefault(); // Your code here
});
回答by Kevin
This should work too:
这也应该有效：
$(document).ready(function(){
$(".hiddenOnLoad").hide();
$("#viewByOrg, #viewByProduct").bind(($.browser.msie ? "click" : "change"), function () {
$(".visibleOnLoad").show();
$(".hiddenOnLoad").hide();
});
});
Thanks Pier. This was very helpful.
谢谢皮尔。这非常有帮助。
回答by Pier Luigi
In IE you must use the click event, in other browsers onchange. Your function could become
在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();
});
});
回答by dovidweisz
add this plugin
添加这个插件
jQuery.fn.radioChange = function(newFn){
this.bind(jQuery.browser.msie? "click" : "change", newFn);
}
then
然后
$(function(){
$("radioBtnSelector").radioChange(function(){
//do stuff
});
});
回答by fabrice
I had the same issue with input text.
我对输入文本有同样的问题。
I changed:
我变了：
$("#myinput").change(function() { "alert('I changed')" });
to
到
$("#myinput").attr("onChange", "alert('I changed')");
and everything is working fine for me!
一切对我来说都很好！
回答by paul
This is a simple way to tell IE to fire the change event when the element is clicked:
这是一种告诉 IE 在单击元素时触发更改事件的简单方法：
if($.browser.msie) {
$("#viewByOrg").click(function() {
$(this).change();
});
}
You could expand this to something more generic to work with more form elements:
您可以将其扩展为更通用的内容以处理更多表单元素：
if($.browser.msie) {
$("input, select").click(function() {
$(this).change();
});
$("input, textarea").keyup(function() {
$(this).change();
});
}
回答by Chris Zwiryk
I'm pretty sure this is a known issue with IE. Adding a handler for the onclickevent should fix the problem:
我很确定这是 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();
});
});
回答by Jeoff Wilks
In IE, force radio and checkboxes to trigger a "change" event:
在 IE 中，强制单选框和复选框触发“更改”事件：
if($.browser.msie && $.browser.version < 8)
$('input[type=radio],[type=checkbox]').live('click', function(){
$(this).trigger('change');
});
