键盘功能无法处理数据表搜索

I have a fiddle for reference.

我有一个小提琴供参考。

I am trying to have keypress events work on the search textbox of the Database. Issue is, it's not working. I can't track what's wrong?

我试图让按键事件在数据库的搜索文本框中起作用。问题是,它不起作用。我无法追踪到底是什么问题?

The following code snippet seems not to be working.

以下代码段似乎无法正常工作。

if ($("#example_filter input").length > 0) {
    alert("search exists");
}
$("#example_filter input").on("keyup", function() {
    alert("hi");
});

3 个解决方案

#1

You need to first add DataTable and then bind the events. Because at the time when you bind the keyup event on input, the input was not present in the DOM.

您需要先添加DataTable然后绑定事件。因为在输入时绑定keyup事件时,DOM中不存在输入。

$(document).ready(function() {
    if ($("#example_filter input").length > 0) {
        alert("search exists");
    }
    $("#example").DataTable();

    $("#example_filter").on("keyup", 'input', function() {
        alert("hi");
    });
});

Demo

#2

The problem is you are creating your dataTable after assigning the event. So create table and then assign it!!

问题是您在分配事件后创建了dataTable。所以创建表然后分配它!

DEMO

$(document).ready(function()
{   
    if($("#example_filter input").length > 0)
    {
        alert("search exists");
    }

    $("#example").DataTable();
    $("#example_filter input").on("keyup",function(){
       alert("hi");    
    });
});

If you would have followed your way like creating dataTable later then you should have used event delegation as below:

如果你以后想要创建dataTable,那么你应该使用如下的事件委托:

DEMO

$(document).ready(function()
{   
    if($("#example_filter input").length > 0)
    {
        alert("search exists");
    }
    $(document).on("keyup",'#example_filter input',function(){
       alert("hi");    
    }); //event delegation
    $("#example").DataTable();
});

#3

Updated Fiddle.

The input was created after the delegation was done. The following can be used for binding a function to element which was not on DOM on ready.

在委派完成后创建了输入。以下内容可用于将函数绑定到准备好的DOM上的元素。

$(document).on("keyup", "#example_filter input", function () {
    alert("hi");
});