jQuery change() on <select> and firefox

Question

I have a dropdown that triggers an ajax call when its changed:

$(\'.travel-to\').change(function(){  
    $.ajax({
        type: \"GET\",
        url: \"/inc         


        

Answer 1

I've just experienced some weird behavior in firefox which enables the user to open the select dropdown, navigate with the arrows and then instead of tabbing out or clicking on a side the user can click another element which will result into changing the select value without firing change event.

To work around this you can trigger the change whenever the keyup (please also suggest other events?) event is fired and the select has a different value then the previous.

var selectRegistry = {},
    $selects = $('select');

$selects.bind('change', function() {
    var $this = $(this);
    selectRegistry[$this.attr('id')] = $this.val();
});

$selects.bind('keyup scroll select', function() {
    var $this = $(this);
    if ($this.val()!=selectRegistry[$this.attr('id')])
    {
        $this.trigger('change');
    }
});

You can use .live() function if you'll have dinamically created select elements along the runtime of the web page.