web-dev-qa-db-ja.com

<select>とfirefoxのjQuerychange（）

変更されたときに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またはキーを押すと同じことをトリガーするために、イベントでどちらかまたは両方を実行できますか？

ありがとう。

javascriptjqueryfirefoxdrop-down-menu
19
Chris J Allen

あなたは実際にIEのバグを利用しています。 FirefoxはonChangeを正しくサポートしています。これは、ブラウザーが選択フィールドのフォーカスを失うまで起動しないためです。 （私 質問に答えました 昨日、この問題について実際に。）特にキーボードのみのユーザーがいくつかのオプションをスキップする方法がないため、selectでonChangeを使用するのは実際には危険です。 （その上、マウスホイールseemsは複数の回答で回転しますが、実際にはIEで通過するエントリごとにonChangeを起動します。）

誰かが上または下を押すたびにイベントを発生させたい場合は、onKeyPressまたはonKeyDownイベントにフックして、「上」または「下」キーが押されるたびに発生させます。

26
Daniel Lew

より良いオプションは、.on()を使用して関数を複数のイベントとしてバインドすることです

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

たぶん、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);
            }
        });
    }
});
2
Jon Erickson

Firefoxで奇妙な動作を経験しました。これにより、ユーザーは選択ドロップダウンを開き、矢印を使用してナビゲートし、タブアウトしたり側面をクリックしたりする代わりに、別の要素をクリックして、選択値を変更せずに変更できます。 changeイベントを発生させます。

これを回避するには、change（他のイベントも提案してください）イベントが発生し、selectの値が前とは異なる場合はいつでも、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');
    }
});
_

Webページの実行時に選択要素を動的に作成する場合は、.live()関数を使用できます。

1
antitoxic

Jqueryを使用して動作させました focusout

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

0
charles