JQuery 1.4 error changing events in IE

Question

JQuery 1.4 error changing events in IE

I have this simple choice:

<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 it has:

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

It worked 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 returning to 1.3?

This really seems to be a bug, and this is reported in jQuery:

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

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

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

+7

jquery internet-explorer jquery-1.4

pambuk Jan 19 '10 at 11:38

source share

5 answers

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

normalize change and submit events (change documentation, send documentation)
The work of modifying and sending events reliably in browsers for both normal and live events. We override the normal change and dispatch of events in Internet Explorer and replace them with events that work the same way with other browsers.

OK, this seems like an error, either in IE or in jQuery.

What causes the problem, the selected = "selected" attribute in the option causes the change event to fire before any mouse event occurs. I assume this is a weird / bug with IE, as it seems that it does not set the selected UNTIL element, this is visible, thereby causing a change even for the initial drop-down list. I am talking about an error in IE because if I call window.event.cancelBubble the event handler does not fire at all.

This is really weird.

The workaround is to remove the selected attribute.

+3

ScottKoon Jan 19 '10 at 18:28

source share

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

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

Have you tried to console the variables?

0

David Jan 19 '10 at 11:51

source share

I am still getting a similar problem even with 1.4.1.

Using the following example:

Select a value from the selection list - a warning (Correct) appears.
Click "Change Link" - the list selection is reset to 0 ("Correct").
Click "Select List" - a warning appears. (Wrong)

The warning in the third step is not displayed 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

Rezler Jan 27 '10 at 18:43

source share

You can use the jQuery blur () event. Maybe 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; });

-4

Click upvote Jan 19 '10 at 11:48

source share

Matt curry · Accepted Answer · 2010-01-22T19:24:54+0000

Correct this error here: http://github.com/mcurry/jquery/commit/a293f5938eb9efd41158b948f487672d43b7c820

Hope it gets into 1.4.1

JQuery 1.4 error changing events in IE

More articles: