添加键码事件处理程序后如何删​​除？

Question

为元素设置一个按键事件处理程序后，如何删除它？

我有一个ID为#sb的搜索框，其中列出了通过自动完成功能键入时的搜索建议，如果有，则在按Enter时转到第一个建议。

如果用户输入了不存在的搜索字符串，它将很好地工作。 按ENTER并没有应有的结果。

但是，如果返回了有效的搜索建议，然后用户改变了主意，并决定搜索没有搜索建议的另一个字符串...按ENTER仍将转到先前建议的搜索结果。

例如，如果用户搜索“热狗”，将其完全删除，然后搜索“ asgdoksadjgoawhet”，则在按Enter时，他们将被重定向到http://example.com/hot-dogs ，而实际上什么都不应该发生。

以下是我的自动填充代码的响应部分：

    response: function( event, ui ) {

        if(typeof ui.content[0] == 'undefined') {

            //no search results exist

            //make enter do nothing
            $('#sb').keypress(function(e) {
                if(e.which == 13) {
                    e.preventDefault(); //does not work
                    $('#sb').off('keypress', '#sb'); //does not work, either
                }
            });

        } else {

            //search results exist

            //make ENTER go to the first suggested result
            $('#sb').on('keypress', function(e) {
                if(e.which == 13) {
                    window.location.href = 'http://example.com/'+ui.content[0].id;
                }
            });

        }
    }

也许我不应该使用匿名函数？

Answer 1

$( "#foo" ).bind( "click", handler );

function handler(){
  //do the stuff
}

//after some condition
$( "#foo" ).unbind( "click", handler );

将函数的引用绑定到事件回调，以便以后可以使用它来取消绑定。

Answer 2

    $('#sb').on("keypress", function(e) {
        if(e.which == 13) {
            $(this).off(e);
        }
    });

Answer 3

如果要在使用后直接解除绑定，可以使用.one

这只会触发一次事件：

$('#sb').one('keypress', function(e) {
    if(e.which == 13) {
        //do stuff
        }
    });

但是，如果您想在其他任何时间取消绑定事件，则可以执行以下操作：

var kbEvent = $('#sb').on('keypress', function(e) {
            if(e.which == 13) {
                //do stuff
            }
        });

.... some other code ...
$('#sb').off(kbEvent);

Answer 4

$('#sb').off('keypress', '#sb'); 删除元素“ #sb”的子元素“ #sb”上的事件处理程序。

$('#sb').off('keypress'); 删除“ #sb”上的事件处理程序。

另一个例子$( "#dataTable tbody" ).on( "click", "tr", function() { //... }); 在“ #dataTable tbody”中的每个tr元素上添加事件处理程序

$( "#dataTable tbody" ).off( "click", "tr"); 从“ #dataTable tbody”中的每个tr元素中删除它

Answer 5

试试这个小例子，它向您展示了如何绑定和解除绑定事件。

HTML

<div>
    <input id="bind_me"/>
    <div>
    </div>
</div>

jQuery代码

$('#bind_me').on('keypress', function(e)
{
    if(e.which==='q'.charCodeAt(0) || e.which==='q'.charCodeAt(0) )
    {
        $('#bind_me').off('keypress');
    }
    var tmp = $(this).next().text();
    $(this).next().text(tmp+String.fromCharCode(e.which));
});