jQuery取消绑定和绑定按键答案

【问题标题】：jQuery unbind and bind keypressjQuery取消绑定和绑定按键
【发布时间】：2018-08-09 06:43:02
【问题描述】：

我有一个带有 javacript 函数的文本框，使用 keypress。

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

$('#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。

是否可以解绑然后绑定按键？

【问题讨论】：

标签： javascript jquery bind unbind

【解决方案1】：

如果你想再次使用.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"/>

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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);

【讨论】：