篩選器/搜索功能未針對動態添加的行

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/
您需要對動態添加的dom元素使用'on' ，因此我們不能在當前dom上使用keyup。 使用方法是：

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

Answer 2

Tobias，您的標記可能是錯誤的。

順便說一句，如果您將使用表頭，並且您不希望它過濾這些頭：

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