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

Question

我有一个fiddle供参考。

我正在尝试让按键事件在数据库的搜索文本框中起作用。问题是，它不起作用。我无法跟踪哪里出了问题？

以下代码片段似乎不起作用。

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

Answer 1

您需要先添加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");
    });
});

Demo

Answer 2

问题是您在分配 event 之后创建 dataTable。所以创建table然后赋值！！

DEMO

$(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，如下所示：

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

Answer 3

已更新 Fiddle。

输入是在委派完成后创建的。以下可用于将函数绑定到不在 DOM 就绪时的元素。

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

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

Keyup functions not working on Datatable search

javascript

datatable

jquery