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

Question

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

 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>

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

Answer 1

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

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

Answer 2

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

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

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