Question

I’m dynamically populating a select box with option values based on search results returned by AJAX and PHP. When a user clicks one of the options in the dynamically populated select box, a dialog box containing a form should pop up, pre-populated with values. The code works perfectly in Mozilla Firefox but not in IE. I’ve simplified the jQuery code (cut out the populating of form values part) and it can be seen below:

 $("#user-select").change(function() {
        $("#user-select option").click(function() {
            $( "#form" ).dialog( "open" );
            return false;
        });
  });

Not sure why the form doesn’t pop-up when an option is clicked in IE. Let me know if you need any more information.

Answer 1

Don’t bind click events to option elements, it wont work in all browsers. Simply open the dialog instead and remove the click.

$("#user-select").change(function() {
  $( "#form" ).dialog( "open" );
});

Edit for comments:

function selectHandler () {
  $( "#form" ).dialog( "open" );
  var val = $( this ).val();
}

$( "#user-select" ).one( "change", function ( ) {
  selectHandler();
  $( this ).click( selectHandler );
});

This version makes it react to change first, and after that it reacts to click. Also, this is a much easier way to get the value.