Question

我有以下一对多数据模型：地区有客户，客户有Notes和Alerts

我已经实现了如下提取填充：

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功能之前，一切都运行良好。我想要发生的是，在你点击保存（我有一个处理程序）后，区域列表重新填充。问题是，因为它是在一个单独的处理程序中，我必须重新定义整个嵌套列表＆gt;再次单击函数结构，这就是代码重复。以下是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>
                                });

                            });
                        } 
                    }                       
                });

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

Answer 1

你在上面的代码中使用的

.click（）是.bind（'click'）的快捷方式。这会绑定所有匹配元素已存在的事件处理程序。有.live（），与.bind（）的对应物，对于将来添加的元素也是如此。但jQuery文档指出：

从jQuery 1.7开始，不推荐使用.live（）方法。使用.on（）来   附加事件处理程序。旧版jQuery的用户应该使用   .delegate（）优先于.live（）。

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

我在评论中的意思现在您需要做什么（假设#parent是所有.regionrow s的共同父级）而不是

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

是

$("#parent").on("click", ".regionrow", function(){
    (...)
});

jquery嵌套了ajax列表和onclick函数设计

1 个答案: