jQuery change () для <select>и firefox

Question

У меня есть раскрывающийся список, который вызывает вызов ajax при его изменении:

$('.travel-to').change(function(){  
    $.ajax({
        type: "GET",
        url: "/inc/rates/rates-viewer.php",
        data: "shtech=y&c_name="+escape($(this).val()),
        success: function(html){
            $(".rates-viewer").html(html);
            $(".rates-viewer tr.numbers td").css({ opacity: 0 }).fadeTo("slow",1);
        }
    });
});

Моя проблема в том, что в Firefox использование клавиш курсора вверх / вниз для циклического переключения параметров раскрывающегося меню не вызывает событие js onChange(). Это нормально в IE.

Как я могу заставить Firefox видеть курсоры вверх / вниз как onChange? Могу ли я сделать или / или на событии, чтобы сделать либо onChange, либо нажатие клавиши для запуска того же самого?

Спасибо.

Answer 1

Вы на самом деле пользуетесь ошибкой в ​​IE. Firefox правильно поддерживает onChange, так как он не должен запускаться, пока браузер не потеряет фокус поля выбора. (Вчера я ответил на вопрос об этой самой проблеме.) На самом деле использование onChange с выделением довольно опасно, особенно потому, что пользователи, использующие только клавиатуру, не могут пропустить некоторые опции. (Кроме того, колесо мыши кажется крутящимся на несколько ответов, но на самом деле оно запускает onChange для каждой записи, проходящей через IE.)

Если вы действительно хотите, чтобы событие вызывалось всякий раз, когда кто-то нажимает вверх или вниз, я бы подключил события onKeyPress или onKeyDown, чтобы они срабатывали при нажатии клавиши «вверх» или «вниз».

Answer 2

лучше использовать .on() для привязки функции как нескольких событий

$("#member").on("change keyup", function(){
    -----
});

Answer 3

Может быть, вместо использования события change () использовать событие blur () и проверить, изменилось ли значение?

К вашему сведению, я не проверял это, просто идея, которая у меня была. и я не уверен, является ли это желаемым эффектом, потому что это приведет к потере фокуса, но я предлагаю его, чтобы сохранить постоянство эффекта в разных браузерах.

var currentValue;

$('.travel-to').blur(function(){
    var val = $(this).val();
    if (currentValue != val) {
        currentValue = val;
        $.ajax({
            type: "GET",
            url: "/inc/rates/rates-viewer.php",
            data: "shtech=y&c_name="+escape(currentValue),
            success: function(html){
                $(".rates-viewer").html(html);
                $(".rates-viewer tr.numbers td").css({ opacity: 0 }).fadeTo("slow",1);
            }
        });
    }
});

Answer 4

Я только что испытал какое-то странное поведение в Firefox, которое позволяет пользователю открывать выпадающий список, перемещаться со стрелками, а затем вместо того, чтобы вкладывать или щелкать по стороне, пользователь может щелкнуть другой элемент, что приведет к изменению выберите значение без стрельбы change событие.

Чтобы обойти это, вы можете вызвать change всякий раз, когда срабатывает событие keyup (также, пожалуйста, предложите другие события?), И выбор имеет значение, отличное от предыдущего.

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');
    }
});

Вы можете использовать функцию .live(), если у вас будут динамически создаваемые элементы select во время выполнения веб-страницы.

Answer 5

Я получил его с помощью jquery focusout

http://api.jquery.com/focusout/