Issue with jquery table row search
<p>I'm creating a table dynamically and parsing it into a table. Once the table is displayed, I'd like users to be able to do a live search through all the rows. I'm having issues with getting this to work properly.</p>

<p>Source included - skip to next code section to see js specifically related to the live search of table rows.</p>

<pre><code>    &lt;html&gt;
&lt;head&gt;
        &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
        &lt;title&gt;Pairings&lt;/title&gt;
        &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
        &lt;script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"&gt;&lt;/script&gt;
        &lt;script src="http://www.parsecdn.com/js/parse-1.1.12.min.js"&gt;&lt;/script&gt;

        &lt;script id="openDay" type="text/template"&gt;
&lt;input type="text" id="search" placeholder="Type to search"&gt;

                &lt;table data-role="table" id="pairingsTable" data-mode="columntoggle" class="ui-responsive table-stroke"&gt;
                        &lt;thead&gt;
                                &lt;th data-priority="2"&gt;Grp&lt;/th&gt;
                                &lt;th&gt;Pro / Am&lt;/th&gt;
                                &lt;th data-priority="1"&gt;Thr&lt;/th&gt;
                                &lt;th data-priority="3"&gt;Fri&lt;/th&gt;
                                &lt;th data-priority="4"&gt;Sat&lt;/th&gt;
                        &lt;/thead&gt;
                        &lt;tbody&gt;
        &lt;/script&gt;

        &lt;script id="closeDay" type="text/template"&gt;
                        &lt;/tbody&gt;
                &lt;/table&gt;
        &lt;/script&gt;

        &lt;script id="pairing" type="text/template"&gt;
                &lt;tr&gt;
                        &lt;td&gt;&lt;%= this.model.get("GroupID") %&gt;&lt;/td&gt;
                        &lt;td style="padding:6px;"&gt;&lt;%= this.model.get("Professional1") %&gt; and &lt;%= this.model.get("Amateur1") %&gt;&lt;br&gt;
                        &lt;%= this.model.get("Professional2") %&gt; and &lt;%= this.model.get("Amateur2") %&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;%= this.model.get("ThursdayCourse") %&gt;&lt;br&gt;
                        &lt;%= this.model.get("ThursdayTeeTime") %&gt; &lt;%= this.model.get("TenthTee1") %&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;%= this.model.get("FridayCourse") %&gt;&lt;br&gt;
                        &lt;%= this.model.get("FridayTeeTime") %&gt; &lt;%= this.model.get("TenthTee2") %&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;%= this.model.get("SaturdayCourse") %&gt;&lt;br&gt;
                        &lt;%= this.model.get("SaturdayTeeTime") %&gt; &lt;%= this.model.get("TenthTee3") %&gt;&lt;/td&gt;
                &lt;/tr&gt;
        &lt;/script&gt;
        &lt;script&gt;
        $(function(){

                Parse.$ = jQuery;
                // Connect to Parse

                Parse.initialize("soyC2zYsel97QtRsNhhNUxLoBgKe6kxnX0WxUBYT", "mZL82WFBjR2UUwJrwIu5WYLoRr0FzjPlHiTrD8zj");

                var Pairing = Parse.Object.extend("golfTourney");

                var Pairings = Parse.Collection.extend({
                        model: Pairing
                });

                var PairingView = Parse.View.extend({
                        template:  _.template($("#pairing").html()),

                        initialize: function(){
                                _.bindAll(this, 'render');
                        },

                        render: function(){
                                return this.template(this.model);
                        }
                });

                var AppView = Parse.View.extend({
                        el: $("div"),
                        openTemplate: _.template($("#openDay").html()),
                        closeTemplate: _.template($("#closeDay").html()),

                        initialize: function() {
                                _.bindAll(this, 'render');
                                var self = this;

                                this.collection = new Pairings;
                                this.collection.query = new Parse.Query(Pairing);
                                this.collection.query.ascending("GroupID");
                        this.collection.fetch();

                        this.collection.bind('reset', function(){
                                self.render();
                        });
                        },
                        render: function(collection) {
                                var self = this, html = this.openTemplate();

                                console.log(this.collection);

                                this.collection.sortBy(function(m){
                                        return m.get("GroupID");
                                })

                                this.collection.forEach(function(m){
                                        var pairing = new PairingView({model: m});
                                        html += pairing.render();
                                });

                                html += this.closeTemplate();
                                this.$el.append(html);
                        }
                });

                var appview = new AppView();
        });
</code></pre>

<p>This is the js in question....</p>

<pre><code>        $('#pairingsTable').load(function(){

                var $rows = $('#pairingsTable tr');
                $('#search').keyup(function() {
                        var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

                        $rows.show().filter(function() {
                                var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
                                return !~text.indexOf(val);
                        }).hide();
                });
        });
        &lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;

        &lt;div&gt;

        &lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>What am I missing here? Can I not use this method since my content is being generated dynamically?</p>

<p>thanks</p>
