jQuery 解绑和绑定按键

Question

我有使用 keypress.

的带有 javacript 函数的文本框

<input type="text" id="statusSheet"/>

JS

$('#statusSheet').keypress(function (e)
{
    if(e.which ==13)
    {
        $('#statusSheet').unbind('keypress');

        $.ajax(
        {
            url: "chkInfo",
            type: "POST",
            data:
            {
                statusSheet: statusSheet,
                dataID: dataID
            },
            dataType: "JSON",
            success: function (jsonStr)
            {
                $('#statusSheet').bind('keypress');
            }
        }
    }
});

当我尝试按回车键时，它会先 unbind 文本框，直到 ajax 处理完毕，然后将其恢复为 bind 按键。

尝试后，unbind 工作正常，但当还原时，仍然没有效果 unbind。

是否可以解绑再绑定按键？

Answer 1

 $(document).off("keypress", "#statusSheet").on("keypress", "#statusSheet", function (e) 
{
    if(e.which ==13)
    {
        $('#statusSheet').unbind('keypress');

        $.ajax(
        {
            url: "chkInfo",
            type: "POST",
            data:
            {
                statusSheet: statusSheet,
                dataID: dataID
            },
            dataType: "JSON",
            success: function (jsonStr)
            {
                $('#statusSheet').bind('keypress');
            }
        });
    }
});

Answer 2

如果您想再次使用 .bind，您必须提供一个事件处理程序。这是触发事件时要执行的操作。您没有在尝试重新绑定时提供一个，因此在触发按键时没有任何反应。

一个解决方案是编写一个函数来处理您的按键事件。如果您想重新绑定按键，只需将该函数用作事件处理程序即可。

// this is called after each keypress in your element
function handleKeyPress(e) {
    console.log('hello');
    if(e.which ==13)
    {
        console.log('unbind key. Wait 5 seconds...');
        $('#statusSheet').unbind('keypress');

        // this timeout replaces the ajax call (similar behavior)
        window.setTimeout(function(){
          $('#statusSheet').bind('keypress', handleKeyPress); // rebind action.
        }, 5000);
    }
} 
// initial bind
$('#statusSheet').keypress(handleKeyPress);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="statusSheet"/>

Answer 3

您没有将事件处理程序绑定回您的元素。你可以这样做：

let $statusSheet = $('#statusSheet');
let onKeyPress = (e) => {
    if(e.which == 13)
    {
        $statusSheet.unbind('keypress');

        $.ajax(
        {
            url: "chkInfo",
            type: "POST",
            data:
            {
                statusSheet: statusSheet,
                dataID: dataID
            },
            dataType: "JSON",
            success: function (jsonStr)
            {
                 $statusSheet.keypress(onKeyPress);
            }
        }
    }
}
$statusSheet.keypress(onKeyPress);

jQuery 解绑和绑定按键

jQuery unbind and bind keypress

javascript

jquery

bind

unbind