0

次の 1 対多のデー​​タモデルがあります: リージョンにはクライアントがあり、クライアントにはメモとアラートがあります

そして、私は次のように移入のフェッチを実装しました:

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') のショートカットです。これにより、すでに存在するすべての一致する要素のイベント ハンドラーがバインドされます。.bind() に対応する .live() があります。これは、将来追加される要素に対しても同じことを行います。しかし、jQuery のドキュメントには次のように記載されています。

jQuery 1.7 以降、.live() メソッドは非推奨になりました。.on() を使用して、イベント ハンドラーをアタッチします。古いバージョンの jQuery のユーザーは、.live() よりも .delegate() を使用する必要があります。

このメソッドは、デリゲートされたイベント ハンドラーをページのドキュメント要素にアタッチする手段を提供します。これにより、コンテンツがページに動的に追加されるときのイベント ハンドラーの使用が簡素化されます。詳細については、.on() メソッドの直接イベントと委任イベントの説明を参照してください。

私は私のコメントでこれを意味しました。
今あなたがしなければならないこと（#parentがすべての共通の親であると仮定します.regionrow）の代わりに

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

は

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