2

変更イベントがどのようにトリガーされているかを知りたかったのです。マウスクリックでトリガーされたのか、キーボードからのキーストロークによってトリガーされたのかを判断したいと思います。

編集:

Ok。これが私がやりたいことです。これは、州の変更イベントで都市のリストを取得する単純な ajax 作業です。私のコードはすべて優れており、実際に機能します。

$('#state').change(function(event) {
    $.ajax({
        url: target,
        type: 'POST',
        data: data,
        success: function(data, textStatus, XMLHttpRequest) {
            $('#cityBox').html( data );
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert("error");
        }
    });
});

問題: Chrome が .change イベントを台無しにします。キーボードのキーも使用すると、変更イベントが呼び出されます。したがって、矢印キーまたはその他のキーを使用して状態を変更すると、キーを押すたびに変更イベントがトリガーされますが、これは発生したくありません。

予想されるアプローチ:

1）イベントがどのようにトリガーされているかがわかれば、クロムの動作をオーバーライドできるかもしれません。しかし、問題は .change イベントでは機能しないことです。常に undefined を返します。

2) if else を使用する。このようなものですが、私が知っているようにうまくいかないことは確かです.

$('#state').change(function(event) {
    if(!$('#state').keyup()) {
        $.ajax({
            url: target,
            type: 'POST',
            data: data,
            success: function(data, textStatus, XMLHttpRequest) {
                $('#cityBox').html( data );
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert("error");
            }
        });
    }
});

3）キー値を変数に保存し、それが存在するかどうかを確認します。この動作の問題は、イベントがマウスでトリガーされたときに変数 this_key を設定できないことです。

var this_key=0;

$('#state').change().keyup(function(e) {
    var code = (e.keyCode ? e.keyCode : e.which);
    if(code!= 13) { // If not enter key
        this_key=code;
    }
});

$('#state').change(function(event) {
    if(!this_key) {
        setTimeout(function(){
            $.ajax({
                url: target,
                type: 'POST',
                data: data,
                success: function(data, textStatus, XMLHttpRequest)     {
                    $('#cityBox').html( data );
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert("error");
                }
            });
        }, 100);
    }
});
4

1 に答える 1

1 
<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

    <input id="inputsource" value="do something :)">
    <div id="log"></div>
    <script>
        $('#inputsource').bind('change keydown mousedown',function(e){
            console.log(e.type);
            $('#log').html(e.type);
        });
    </script>

</body>
</html>
于 2012-04-23T09:53:08.967 に答える