Keyup功能不工作的数据表搜索

Keyup functions not working on Datatable search

本文关键字：数据表 搜索 工作 功能 Keyup      更新时间：2023-09-26

我有一把小提琴作为参考。

我试图有按键事件工作在数据库的搜索文本框。问题是，它不起作用。我无法追踪出了什么问题?

下面的代码片段似乎不能工作。

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

需要先添加DataTable，然后再绑定事件。因为当您将keyup事件绑定到input时，input并不存在于DOM中。

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

问题是您在分配event后创建dataTable。所以创建表，然后分配它!!

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

如果你想按照你的方式创建dataTable，那么你应该使用event delegation，如下所示:

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

更新小提琴。

在委托完成后创建输入。下面的语句可以用来将一个函数绑定到不在DOM上的元素。

$(document).on("keyup", "#example_filter input", function () {
    alert("hi");
});
相关文章：