Question

当搜索字段聚焦时，我正在将JSON加载到浏览器中。然后，我将迭代JSON对象，以便在keydown上实时查找结果。

我遇到的问题在第一段代码

之后在控制台中描述

Ajax Call

$('.table-search').on('focus', function() { // load JSON when search field focused
    var input = $(this);
    $.ajax({
        url: cml_theme.ajaxurl,
        type: 'post',
        dataType: 'json',
        cache: true,
        data: {
            action: 'get_coins_as_json' // loads JSON
        },
        success: function(result) {
            console.log(result) // does not incrementally stack (works fine)
            $(document).on('keydown', function(e) {
                console.log(e); // incrementally stacks (see below)
            });
        }
    });
});

控制台

以下是在每个keydown记录的内容，而不是累积日志，即在第3个焦点上它将3个“spams”3行发送到控制台。我只想要触发1行。

在第一次关注和1次关键时：

r.Event {originalEvent: KeyboardEvent, type: "keydown", target: input.table-search {...}

第二次关注和1次关键：

r.Event {originalEvent: KeyboardEvent, type: "keydown", target: input.table-search {...}
r.Event {originalEvent: KeyboardEvent, type: "keydown", target: input.table-search {...}

关于第三个焦点和1个关键点：

r.Event {originalEvent: KeyboardEvent, type: "keydown", target: input.table-search {...}
r.Event {originalEvent: KeyboardEvent, type: "keydown", target: input.table-search {...}
r.Event {originalEvent: KeyboardEvent, type: "keydown", target: input.table-search {...}

修改

我对事件监听器缺乏了解导致了这个问题。我在成功函数的开头添加了以下行来清除堆栈事件监听器：

$(document).off('keydown'); // clear event listeners

Answer 1

每次调用成功时，都会为onKeyDown事件添加回调函数。因此，每当您专注于搜索栏时，您都会添加onKeyDownListener，以便为每个按键事件调用。为什么只在ajax调用成功后才添加key down侦听器？

Ajax on。（'keydown'）事件堆叠

1 个答案: