让jQuery在IE中识别.change（）
我正在使用jQuery隐藏和显示单选button组更改/单击时的元素。 它在Firefox等浏览器中工作正常，但在IE 6和7中，只有当用户点击页面上的其他位置时才会执行此操作。
详细说明一下，当你加载页面时，一切看起来都很好。 在Firefox中，如果单击一个单选button，则会隐藏一个表格行，另一个表格会立即显示。 但是，在IE 6和7中，您单击单选button，直到您单击页面上的某个位置，才会发生任何事情。 IE才重新绘制页面，隐藏和显示相关的元素。
这里是我正在使用的jQuery：
$(document).ready(function () { $(".hiddenOnLoad").hide(); $("#viewByOrg").change(function () { $(".visibleOnLoad").show(); $(".hiddenOnLoad").hide(); }); $("#viewByProduct").change(function () { $(".visibleOnLoad").hide(); $(".hiddenOnLoad").show(); }); }); 这是它影响的XHTML的一部分。 整个页面validation为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>
如果有人有任何想法，为什么发生这种情况，以及如何解决这个问题，他们将非常感激！
尝试使用.change .click不是.change 。
使用click事件而不是change是，如果select了相同的单选框（即，实际上没有更改），则会得到该事件。 如果您检查新值与旧值不同，可以将其过滤掉。 我觉得这有点烦人。
如果您使用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的评论）。
你有没有试过IE的onpropertychange事件？ 我不知道它是否有所作为，但它可能值得一试。 当通过JS代码更新值时，IE不会触发更改事件，但可能onpropertychange将在此实例中工作。
$("#viewByOrg").bind($.browser.msie? 'propertychange': 'change', function(e) { e.preventDefault(); // Your code here });
这也应该工作：
$(document).ready(function(){ $(".hiddenOnLoad").hide(); $("#viewByOrg, #viewByProduct").bind(($.browser.msie ? "click" : "change"), function () { $(".visibleOnLoad").show(); $(".hiddenOnLoad").hide(); }); });
感谢docker。 这非常有帮助。
在IE中，你必须使用点击事件，在其他浏览器onchange。 你的function可能成为
$(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(); }); });
添加这个插件
jQuery.fn.radioChange = function(newFn){ this.bind(jQuery.browser.msie? "click" : "change", newFn); }
然后
$(function(){ $("radioBtnSelector").radioChange(function(){ //do stuff }); });
我对input文本有同样的问题。
我变了：
$("#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(); }); }
我很确定这是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中，强制收音机和checkbox触发“更改”事件：
if($.browser.msie && $.browser.version < 8) $('input[type=radio],[type=checkbox]').live('click', function(){ $(this).trigger('change'); });
作为jquery 1.6这不再是一个问题..不知道什么时候它是固定的..虽然感谢上帝
如果您将jQuery版本更改为1.5.1，则无需调整代码。 然后，IE9将听完完美的：
$(SELECTOR).change(function() { // Shizzle });
点击的技巧…但如果你想获得无线电或checkbox的正确状态，你可以使用这个：
(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 })
使用点击而不是改变使得行为是不同的。 我宁愿使用定时器（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 });
试试这个，它适用于我
$("#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')});
这可能有助于某人：而不是从表单的ID开始，目标selectID并提交更改的forms，如下所示：
<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(); });
（显然，提交button是可选的，以防javascript被禁用）
尝试以下操作：
.bind($.browser.msie ? 'click' : 'change', function(event) {
避免使用.focus（）或.select（）之前.change（）函数的jQuery的IE浏览器，那么它工作正常，即时通讯使用它在我的网站。
谢谢
//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; }); }
请尝试使用每个，而不是更改 / 点击 ，即使在IE浏览器以及其他浏览器第一次工作正常
不是第一次工作
$("#checkboxid").**change**(function () { });
第一次工作也很好
$("#checkboxid").**each**(function () { });
