添加鍵碼事件處理程序后如何刪​​除？

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