过滤/搜索功能不针对动态添加的行答案

【问题标题】：Filter/search function not targetting dynamically added rows过滤/搜索功能不针对动态添加的行
【发布时间】：2016-12-28 02:56:57
【问题描述】：

我找到了一个如何在表中搜索值的示例。

 var $userRows = $('#UserTableContainer tr');
    $('#searchuser').keyup(function () {
        var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

        $userRows.show().filter(function () {
            var text = $(this).text().replace(/\screen+/g, ' ').toLowerCase();
            return ! ~text.indexOf(val);
        }).hide();
    });

它在“普通”表上运行良好，例如见http://jsfiddle.net/7BUmG/2/ 但是，我使用 jQuerys 模板函数向我的表添加值。

function PrintUsers(item) {
    $.template('userList', '<tr>\
         <td>${Firstname} ${Lastname}</td>\
         </tr>');

    $.tmpl('userList', item).appendTo("#UserTableContainer");
}

当我尝试在表格中搜索元素时，它只会过滤我的标题，即此表格中的“名称”行。

    <table id="UserTableContainer">
        <tr>
            <th>Name</th>
        </tr>
    </table>

有人知道我做错了什么吗？

【问题讨论】：

标签： javascript jquery html filter html-table

【解决方案1】：

更新代码 http://jsfiddle.net/7BUmG/128/
对于动态添加的 dom 元素，您需要使用 'on'。所以我们不能在当前 dom 上使用 using keyup 。使用方法是：：

 $(document).on(events, selector, data, handler);

【讨论】：

好的。当我尝试使用更新后的代码时，我不断收到“Uncaught TypeError: Object [object Object] has no method 'on'”。有什么我需要包含才能使用它的吗？
您可能使用的是旧版本的 jQuery。 .适用于 jquery 1.7+ 您可以使用 live 或 delegate（delegate 应该用于 1.7.x 以外的 jQuery 版本。）[阅读更多]here(api.jquery.com/live)
刚刚注意到我实际上可以在我的 Intellisense 中看到“on”功能。是的，我使用的是 jQuery 1.8。我一直收到错误。我需要将函数添加到 JavaScript 文档的任何特定部分吗？
你把它包装在 $(document).ready(function () {//code }); .. 在stackoverflow.com/questions/10912346/…中查看更多信息
首先，感谢您花时间回答我的问题。我已经尝试将它包装在 .ready-tags 中，并且我也已经检查了该链接。他们都没有让我知道出了什么问题。 ://

【解决方案2】：

Tobias，你的标记可能是错误的。

顺便说一句，如果您将使用表头并且您不希望它过滤这些：

var $rows = $('#table tr').not(':first');

【讨论】：