JQuery와 중첩 아약스 목록과 온 클릭 기능 디자인

Question

내가 가지고있는 많은 데이터 모델에 하나를 다음 지역은 고객이, 클라이언트는 노트를 가지고 및 경고

을 다음과 같이 나는 가져 오는 동안 채우기를 구현 한 :

다음과 같이

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);       
        }); 
       }); 
      }); 
     }); 
    }); 
}); 

모든 것이 정말 잘 내가 implemen 때까지 작동 별도의 클릭 핸들러에서 addRegion 기능. 내가 원하는 것은 save (나는 그것을위한 핸들러가있다)를 클릭하면 regions리스트가 다시 채워진다. 문제는 그것이 seprate 핸들러에 있기 때문에 전체 중첩 목록을 다시 정의해야합니다.> 함수 구조를 다시 클릭하고 코드 중복을 다시 정의해야합니다.

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

          }); 
         } 
        }      
       }); 

이 나에게 매우 일반적인 패턴처럼 보인다 가장 좋은 방법은 분명하기 때문이다 구현하기 위해 무엇인지 궁금 해서요 (작동하지만,)이 좋지 않은 : 여기에 addRegion 코드를 다음과 같습니다.

Answer 1

위의 코드에서 사용하고있는 .click()은 .bind ('클릭')의 바로 가기입니다. 이는 일치하는 모든 요소에 대한 이벤트 핸들러를 이미 존재하는에 바인드합니다. .live()는 .bind()에 해당하며, 이 미래에 추가 될 요소에 대해서도 마찬가지입니다.도 마찬가지입니다. 그러나 jQuery 문서는 다음과 같이 말합니다 :

. jQuery 1.7부터 .live() 메소드는 더 이상 사용되지 않습니다. .on()을 사용하여 이벤트 핸들러를 연결하십시오. 이전 버전의 jQuery 사용자는 .live()보다 우선하여 .delegate()를 사용해야합니다.

이 메서드는 페이지의 문서 요소에 위임 된 이벤트 처리기를 연결하여 콘텐츠가 페이지에 동적으로 추가 될 때 이벤트 처리기를 사용하는 것을 단순화합니다. 정보에 대한 자세한 내용은 .on() 메서드에서 직접 이벤트와 위임 된 이벤트에 대한 설명을 참조하십시오.

나는 내 코멘트에서 이것을 의미했습니다.
지금 당신이해야 할 무엇을 대신

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

의 (#parent 가정은 모든 .regionrow의 공통의 부모 인) 당신이 [() 문서에 jQuery를]를 상담해야한다고 생각

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