Javascript Keyup函数不适用于数据表搜索

我有一本参考书

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

下面的代码段似乎不起作用

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

---

您需要首先添加

DataTable

，然后绑定事件。因为当您在

input

上绑定

keyup

事件时，

input

在

DOM

中不存在

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

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

---

问题是，在分配

事件之后，您正在创建
数据表。所以，创建表，然后分配它


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

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

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

如果您以后会按照自己的方式创建
数据表
，那么您应该使用
事件委派
，如下所示：


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

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

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