Question

I found an example of how to search for values in a table.

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

It works fine on “normal” tables, see for instance this http://jsfiddle.net/7BUmG/2/ However, I add values to my table using jQuerys template function.

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

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

When I try to search for elements in my table it only filters my header, i.e. the “Name” row in this table.

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

Anyone got any ideas what I’m doing wrong?

Answer 1

Update code
http://jsfiddle.net/7BUmG/128/
You need to use 'on' for dom elements that are added dynamic.So we can’t use using keyup on present dom .
The way to use is::

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