jQuery 1.4 change event bug in IE

2019-04-24 18:36发布

站内问答 / jQuery
1967 5 5

I have this simple select:

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

and on it there's:

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

It used to work in jQuery 1.3, but in 1.4 the change event is fired as soon as I click on the select box. Is there any solution besides going back to 1.3?

This really seems to be a bug and it has been reported to jQuery:

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

There has been a patch applied and will be part of jQuery 1.4.1.

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

5条回答
我只想做你的唯一
2楼-- · 2019-04-24 18:58

I am still getting a similar issue even with 1.4.1.

Using the example below:

  1. Select a value from the select list - an alert appears (Correct).
  2. Click the Change link - select list resets to 0 (Correct).
  3. Click the Select list - an alert appears. (Wrong)

The alert in the third step does not appear in 1.3.2.

<!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>
查看更多
0人赞 添加讨论(0) 举报
Viruses.
3楼-- · 2019-04-24 19:01

I'm not sure if it's supposed to work this way, but you are accessing this.value and this.name in the same callback. I would assume this refers to event.currentTarget, which in this case is the SELECT element.

In that case, this.value will be undefined, but you can try using $(this).val(); instead.

Did you try consoling out the variables?

查看更多
0人赞 添加讨论(0) 举报
Melony?
4楼-- · 2019-04-24 19:12

Here's fix for this bug: http://github.com/mcurry/jquery/commit/a293f5938eb9efd41158b948f487672d43b7c820

Hopefully it'll get into 1.4.1

查看更多
0人赞 添加讨论(0) 举报
The star\"
5楼-- · 2019-04-24 19:14

From http://jquery14.com/day-01/jquery-14

change and submit events normalized (Change Documentation, Submit Documentation)

The change and submit events work reliably across browsers for both normal and live events. We override the normal change and submit events in Internet Explorer and replace them with events that work identically to the other browsers.

OK, this looks like it's a bug, either in IE or JQuery.

What's causing the problem is the selected="selected" attribute on the option is causing the change event to fire before any mouse event occurs. My guess is, it's a weirdness/bug with IE as it appears that it does not set the selected element UNTIL it is visible, thus causing the change even to fire upon the initial dropdown. I say it's a bug in IE because if I call window.event.cancelBubble, the event handler doesn't fire at all.

That's really weird.

The workaround is to remove the selected attribute.

查看更多
0人赞 添加讨论(0) 举报
虎瘦雄心在
6楼-- · 2019-04-24 19:16

You can use the blur() event of jquery. Perhaps something like this:

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;  
});
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)