Question

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

我有一个ID为#sb的搜索框，列出了通过自动填充键入时的搜索建议，然后按Enter键进入第一个建议，如果有的话。

如果用户输入不存在的搜索字符串，则可以正常工作。按ENTER键无处可去。

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

例如，如果用户搜索“热狗”，则完全删除，然后搜索“asgdoksadjgoawhet”，然后按Enter键，它们将被重定向到http://example.com/hot-dogs，实际上什么都不会发生。< / p>

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

    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'); 删除子元素上的事件处理程序＆＃39;＃sb＆＃39;元素＆＃39;＃sb＆＃39;。

$('#sb').off('keypress');删除＆＃39;＃sb＆＃39;。

上的事件处理程序

另一个例子 $( "#dataTable tbody" ).on( "click", "tr", function() { //... });在＆＃34; #dataTable tbody＆＃34;

中的每个tr元素上添加一个事件处理程序

$( "#dataTable tbody" ).off( "click", "tr");将其从＆＃34; #dataTable tbody＆＃34;

中的每个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));
});

如何在添加密钥代码事件处理程序后将其删除？

5 个答案: