IE 中的 jQuery 1.4 更改事件错误答案

【问题标题】：jQuery 1.4 change event bug in IEIE 中的 jQuery 1.4 更改事件错误
【发布时间】：2011-01-06 18:42:05
【问题描述】：

我有这个简单的选择：

<select name="zlecenia_index_icpp" id="items_per_page">  
    <option value="10">10</option>  
    <option value="25" selected="selected">25</option>  
    <option value="50">50</option>  
</select>

上面写着：

$('#items_per_page').change(function(){  
    var controller_action = this.name.replace(/_/g, '/');  
    location.href = config.base_url + '/' + controller_action + '/'+this.value;  
});

它曾经在 jQuery 1.3 中工作，但在 1.4 中，只要我单击选择框就会触发更改事件。除了回到1.3还有什么解决办法吗？

这似乎真的是一个bug，已经报告给jQuery了：

http://dev.jquery.com/ticket/5869

已经应用了一个补丁，将成为 jQuery 1.4.1 的一部分。

http://github.com/jquery/jquery/commit/435772e29b4ac4ccfdefbc4045d43f714e153381

【问题讨论】：

我在这里报告了这个错误：dev.jquery.com/ticket/5869
任何特定版本的 IE？
我在 IE 7 上使用 XHTML 1.0 Strict 在我的情况下看到了它。
有趣，它只触发 1) 释放鼠标按钮后 2) 只触发一次。

标签： jquery internet-explorer jquery-1.4

【解决方案1】：

以下是针对此错误的修复： http://github.com/mcurry/jquery/commit/a293f5938eb9efd41158b948f487672d43b7c820

希望它会进入 1.4.1

【讨论】：

【解决方案2】：

来自http://jquery14.com/day-01/jquery-14

change 和 submit 事件标准化（更改文档，提交文件）

更改和提交事件有效可靠地跨浏览器正常和现场活动。我们覆盖正常的更改和提交事件 Internet Explorer 并替换它们与工作相同的事件其他浏览器。

好的，这看起来是一个错误，无论是在 IE 还是 JQuery 中。

导致问题的原因是选项上的 selected="selected" 属性导致 change 事件在任何鼠标事件发生之前触发。我的猜测是，这是 IE 的一个奇怪/错误，因为它似乎没有设置选定的元素直到它可见，因此导致更改甚至在初始下拉菜单中触发。我说这是 IE 中的一个错误，因为如果我调用 window.event.cancelBubble，事件处理程序根本不会触发。

这真的很奇怪。

解决方法是删除选定的属性。

【讨论】：

这绝对是 jQuery 1.4 中的一个错误，在 IE 中添加一个 onchange 属性到 select 效果很好，不管子选项上的任何选定属性。
是的，这是一个在 1.41 中修复的错误。

【解决方案3】：

我不确定它是否应该以这种方式工作，但您正在同一个回调中访问 this.value 和 this.name。我假设this 指的是event.currentTarget，在这种情况下是SELECT 元素。

在这种情况下，this.value 将未定义，但您可以尝试改用 $(this).val();。

您是否尝试过消除变量？

【讨论】：

在 1.3 中一切都运行了一年，这只是 IE 中的 jQuery 1.4 的问题。
this.value 和 this.name 给你什么？
this.value 是被选选项的值，也就是select的值； this.name 是选择的名称。
它与 this.value 或 this.name 无关，我的代码不包含任何这些引用，它仍然会发生。顺便说一句，这只发生在我第一次打开时，选择框的每一次打开都可以正常工作。

【解决方案4】：

即使使用 1.4.1，我仍然遇到类似的问题。

使用下面的例子：

从选择列表中选择一个值 - 出现一个警告（正确）。
单击更改链接 - 选择列表重置为 0（正确）。
单击“选择”列表 - 出现警报。（错误）

1.3.2中没有出现第三步的alert。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

    <script type="text/javascript">

    $(document).ready(function(){
        $('#dropDownList1').bind('change',function(){ alert("changed"); });

        $('#btnChange').click(function(){
            $('#dropDownList1')[0].selectedIndex = 0;
        });
    });


    </script>
</head>
<body>
        <select id="dropDownList1">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
        </select>

        <a href="#" id="btnChange">Change</a>
</body>
</html>

【讨论】：

只有在使用“更改”链接后才会发生，即使这样也只会发生一次（ie7）。

【解决方案5】：

你可以使用jquery的blur()事件。也许是这样的：

var defaultValue = 10;

$('#items_per_page').blur(function(){  
    if ($("#items_per_page").val() == defaultValue)
        return; //The value wasn't changed, so return.
    var controller_action = this.name.replace(/_/g, '/');  
    location.href = config.base_url + '/' + controller_action + '/'+this.value;  
});

【讨论】：

这与更改事件的效果相同。我认为它对你有用的关键是你已经包含了一个中断。