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

当我尝试按Enter键时，它将首先unbind文本框，直到处理完Ajax，然后将其还原为bind按键。

尝试过后，unbind工作正常，但是将其还原回unbind仍然没有效果。

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

Answer 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"/>

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

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取消绑定并绑定按键

3 个答案: