Question

我正在动态创建一个表并将其解析为表。一旦显示表格，我希望用户能够在所有行中进行实时搜索。我遇到了让它正常工作的问题。

包含的来源 - 跳到下一个代码部分，查看与表行的实时搜索特别相关的js。

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

        <script id="openDay" type="text/template">
<input type="text" id="search" placeholder="Type to search">

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

        <script id="closeDay" type="text/template">
                        </tbody>
                </table>
        </script>

        <script id="pairing" type="text/template">
                <tr>
                        <td><%= this.model.get("GroupID") %></td>
                        <td style="padding:6px;"><%= this.model.get("Professional1") %> and <%= this.model.get("Amateur1") %><br>
                        <%= this.model.get("Professional2") %> and <%= this.model.get("Amateur2") %></td>
                        <td><%= this.model.get("ThursdayCourse") %><br>
                        <%= this.model.get("ThursdayTeeTime") %> <%= this.model.get("TenthTee1") %></td>
                        <td><%= this.model.get("FridayCourse") %><br>
                        <%= this.model.get("FridayTeeTime") %> <%= this.model.get("TenthTee2") %></td>
                        <td><%= this.model.get("SaturdayCourse") %><br>
                        <%= this.model.get("SaturdayTeeTime") %> <%= this.model.get("TenthTee3") %></td>
                </tr>
        </script>
        <script>
        $(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();
        });

这是有问题的js ....

        $('#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();
                });
        });
        </script>

</head>
<body>

        <div>

        </div>

</body>
</html>

我在这里缺少什么？因为我的内容是动态生成的，所以我不能使用这种方法吗？

感谢

Answer 1

问题确实是在页面加载后创建了DOM。因此，一旦呈现视图，您需要以某种方式绑定到keyup上的#search事件。有几种方法可以做到这一点，但这是一种方式：

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

            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);
            $(document).trigger('list-rendered');        
        }
    });

    var appview = new AppView();
});

$(document).on('list-rendered', function() {
    var $rows = $('#pairingsTable tr');
    $('#search').on('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();
    });
});

现在，我们在使用list-rendered的render方法的末尾触发名为$(document).trigger('list-rendered');的自定义事件。该事件被监听并绑定到底部的代码。

工作jsfiddle：http://jsfiddle.net/QZYwq/

jquery表行搜索问题

1 个答案: