jQuery 1.4 change event bug in IE

问题

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

回答1:

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

Hopefully it'll get into 1.4.1

回答2:

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.

回答3:

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?

回答4:

I am still getting a similar issue even with 1.4.1.

Using the example below:

Select a value from the select list - an alert appears (Correct).
Click the Change link - select list resets to 0 (Correct).
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>

回答5:

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;  
});

来源：https://stackoverflow.com/questions/2093121/jquery-1-4-change-event-bug-in-ie

标签

jquery

internet-explorer

jquery-1.4