Reputation: 5156
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
Upvotes: 7
Views: 4060
Reputation: 1074
I am still getting a similar issue even with 1.4.1.
Using the example below:
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>
Upvotes: 0
Reputation: 360
Here's fix for this bug: http://github.com/mcurry/jquery/commit/a293f5938eb9efd41158b948f487672d43b7c820
Hopefully it'll get into 1.4.1
Upvotes: 3
Reputation: 3493
From http://jquery14.com/day-01/jquery-14
change
andsubmit
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.
Upvotes: 3
Reputation: 108530
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?
Upvotes: 0
Reputation: 267317
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;
});
Upvotes: -4