In an application with over 400 pages, I am modifying some common code to change all select fields on each page to the jquery ui selectmenu. I have successfully done so with this code:
$(function() {
$("select").each(function(){
$( this ).selectmenu({ style: 'dropdown', width : 'auto' });
});
});
this works - however the event handlers for onchange and onfocus for the previously existing select object that are not firing for the new selectmenu.
I tried the following to save them but it doesn't work:
<script language="JavaScript" type="text/javascript">
<!--
$(function() {
$("select").each(function(){
changeH = this.onchange; // save the event handler
alert(changeH); // this shows the correct handler
$( this ).selectmenu({ style: 'dropdown', width : 'auto' });
$( this ).selectmenu().change = changeH; // this line does not work
});
});
//-->
</script>
Perhaps there is a better way to do this, such as an option on selectmenu to fire the events of the previous object. I am going to look at the selectmenu code now but I wanted some thoughts on this, given I have hundreds of select fields on an existing set of pages I want to change in a common place with jquery. thanks..