jquery - 当用户单击 div 时重新初始化在 keyup 事件上触发的代码？

Question

我有一个列表，当您在输入中键入内容时，该列表会被过滤。下面是负责的 javascript:

$("#filter").keyup(function () {
    var filter = $(this).val(), count = 0;
    $(".filtered:first li").each(function () {    
        if ($(this).text().search(new RegExp(filter, "i")) < 0) {
            $(this).addClass("hidden");
        } else {
            $(this).removeClass("hidden");
            count++;
        }
    });
    $('.li-group').each(function(){
        if($(this).children(':visible').length == 0) {
           $(this).prev().addClass('hidden');
        }
        else {
            $(this).prev().removeClass('hidden');
        }
    }); 
});

我想要一个关闭“按钮”，当您单击它时，它会清空所有文本的输入。我已经用下面的代码完成了此操作。但是，由于上面的代码在 keyup 事件上触发，因此不会重新初始化，因此不会显示隐藏的结果。谢谢

$('#filter-close').click(function(){
        $('input#filter').val('');
});

Answer 1

您应该手动调用其 keyup 处理程序。因此，首先设置空值，然后调用将根据新值执行操作的处理程序:

$('#filter-close').click(function(){
        $('input#filter').val('').keyup();
});

这是 trigger 的快捷语法keyup 事件:

$('#filter-close').click(function(){
        $('input#filter').val('').trigger('keyup');
});

如果您不想运行输入框中的其他 keyup 事件处理程序(简单触发将运行所有这些事件处理程序)，您可以为您的事件指定 namespace (对于 1.7 之前的 jQuery，使用 bind() 而不是 on())。

$("#filter").on('keyup.doSearch', function () {
    var filter = $(this).val(), count = 0;
    /* the rest of your keyup handler code */
});

然后你可以像这样触发它:

$('#filter-close').click(function(){
        $('input#filter').val('').trigger('keyup.doSearch');
});