ansaurus

Question

Answer 1

A:

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

Click Upvote 2010-01-19 11:48:28

This has the same effect as the change event. I think the key to it working for you is that you have included an interrupt.

Nick Berardi 2010-01-19 17:56:31

Answer 2

A:

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?

David 2010-01-19 11:51:05

Everything's been working for a year with 1.3, it's only a problem with jQuery 1.4 in IE.

pambuk 2010-01-19 11:58:53

What does this.value and this.name give you?

David 2010-01-19 12:44:54

this.value is the selected option's value, which is select's value; this.name is select's name.

pambuk 2010-01-19 12:52:16

It is not related to this.value or this.name, my code doesn't contain any of those references and it still happens. By the way this only happens on the first open for me, every other open of the select box works fine.

Nick Berardi 2010-01-19 17:50:56

Answer 3

+3 A:

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.

ScottKoon 2010-01-19 18:28:08

it's definitely a bug in jQuery 1.4, adding an onchange attribute to the select works just fine in IE regardless of any selected attributes on child options.

blesh 2010-01-25 18:12:58

Yeah, it was a bug that was fixed in 1.41.

ScottKoon 2010-01-27 04:18:52

Answer 4

+2 A:

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

Hopefully it'll get into 1.4.1

Matt Curry 2010-01-22 19:24:54

This finally works, thank you all.

pambuk 2010-01-26 10:52:27

Answer 5

A:

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"&gt;

<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"&gt;&lt;/script&gt;

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

Rezler 2010-01-27 18:43:12

I've reported a bug for this - http://dev.jquery.com/ticket/5959

Rezler 2010-01-27 20:40:46

It only happens after using the 'Change' link and even then it happens only once (ie7).

pambuk 2010-01-28 11:11:24

ansaurus

tags:

views:

answers:

jQuery 1.4 change event bug in IE

related questions