0

我有以下一对多数据模型：区域有客户，客户有备注和警报

我已经实现了获取填充，如下所示：

When the page loads all the regions load and populate their view.
When you click on a region all the clients for that region load and populate their view.
When you click on a client all the notes/alerts for that client load and populate .their view.

用于此的 jquery 代码如下所示：

    RegionDAO.getRegions(function(data){
        $("#regionlist").empty();
        $("#clientlist").empty();
        $(data).each(function(index){
            $("#regionlist").append("<li class='regionrow blendRow' id='"+this.rid+"'>" + this.name + "</li>");
        });
        $('.regionrow').blend(150);
        $(".regionrow").click(function(){
             $(".regionrow").removeClass("activerow");
             $("#"+$(this).attr("id")).addClass("activerow");
             RegionDAO.getClientsByRegion($(this).attr("id"),function(data){
                 $("#clientlist").empty();
                 $(data).each(function(index){
                     $("#clientlist").append("<li class='clientrow blendRow' id='"+this.cid+"'>" + this.lastname + "</li>");
                 });
                 $('.clientrow').blend(150);
                 $('.clientrow').click(function(){
                     RegionDAO.getNotesByClient($(this).attr("id"),function(data){
                         $("#notelist").empty();
                         $(data).each(function(index){
                             $("#notelist").append("<li class='noterow blendRow' id='"+this.nid+"'>" + this.text + "</li>");
                         });
                         $('.noterow').blend(150);                           
                     });
                    RegionDAO.getAlertsByClient($(this).attr("id"),function(data){
                         $("#alertlist").empty();
                         $(data).each(function(index){
                             $("#alertlist").append("<li class='alertrow blendRow' id='"+this.nid+"'>" + this.text + "</li>");
                         });
                         $('.alertrow').blend(150);                          
                     });
                 });
             });
        });
    });
});

在我在单独的单击处理程序中实现 addRegion 功能之前，一切都运行良好。我想要发生的是，在您单击保存（我有一个处理程序）后，区域列表会重新填充。问题是因为它在一个单独的处理程序中，我必须重新定义整个嵌套列表>再次单击函数结构，这就是代码重复。下面是 addRegion 代码：

$("#addregiondialog").dialog({                          
                    title: 'Add a region',
                    show: "up",
                    open: function(event, ui){

                    },
                    buttons: { "Save": function() {

                            $(this).dialog("close"); 

                            RegionDAO.addRegion($('#region_name').val());
                            RegionDAO.getRegions(function(data){
                                $("#regionlist").empty();
                                $("#clientlist").empty();
                                $(data).each(function(index){
                                    $("#regionlist").append("<li class='regionrow blendRow' id='"+this.rid+"'>" + this.name + "</li>");
                                });
                                $('.regionrow').blend(150);
                                $(".regionrow").click(function(){
                                    //MUST REDEFINE THE CLIENT LOADING AND CLICK STRUCTURE
                                    //HERE AS WELL AS THE CLICKS AND EVERYTHING FOR NOTES AND ALERTS. IE THE ABOVE CODE>
                                });

                            });
                        } 
                    }                       
                });

这对我来说似乎是一种非常常见的模式，并且想知道实现这一点的最佳方法是什么，因为显然（它有效，但是）这并不理想。

4

1 回答 1

1

您在上面的代码中使用的 .click() 是 .bind('click') 的快捷方式。这为所有已经存在的匹配元素绑定了一个事件处理程序。.live() 是 .bind() 的对应物，它对将来添加的元素也是如此。但是 jQuery 文档指出：

从 jQuery 1.7 开始，不推荐使用 .live() 方法。使用 .on() 附加事件处理程序。旧版本 jQuery 的用户应该使用 .delegate() 而不是 .live()。

此方法提供了一种将委托事件处理程序附加到页面的文档元素的方法，这在将内容动态添加到页面时简化了事件处理程序的使用。有关更多信息，请参阅 .on() 方法中对直接事件与委托事件的讨论。

我的意思是在我的评论中。
现在你必须做的（假设#parent是所有.regionrows 的共同父级）而不是

$(".regionrow").click(function(){
    (...)
});

是

$("#parent").on("click", ".regionrow", function(){
    (...)
});
于 2012-06-21T07:52:23.527 回答