Ajax 호출로 렌더링 된 부분 뷰에 JQuery 스크립트로드

Question

다음은 뷰에서 수행 된 작업을 기반으로 부분 뷰가 렌더링되는 div가 포함 된 내 뷰입니다.

//Boiler Plate HTML 
<div id="PartialViewHolder"> 
     @Html.Partial(Model.PartialView, Model) 
</div> 
//Boiler Plate HTML 

부분 뷰

//The url is supplied based on some actions in the main view 
function AjaxCall(url){ 
    $.ajax({ 
     url: url, 
     cache: false, 
     success: function (html) { 
      $("#PartialViewHolder").empty(); 
      $("#PartialViewHolder").html(html); 
     }, 
     error: function (result) { 
      alert("Error: " + result.status + ": " + result.statusText); 
     } 
    }); 
} 

메인 페이지는 부분적인 뷰에 공통되는 몇 가지 다른 스크립트 부하를 다음과 같이 인 AJAX 호출을 통해 표현된다. 이 스크립트는 페이지가 처음 렌더링 될 때, 즉 기본 부분 뷰가 렌더링 될 때 작동합니다. 그러나 이러한 스크립트는 ajax 호출에 의해로드 된 부분 뷰에 대해서는 작동하지 않습니다. DOM 요소가 변경되면이 스크립트를 다시로드해야한다고 생각합니다. 부분보기 div를 다시로드 할 때 해당 스크립트를 새로 고치는 명확한 방법을 찾고 있습니다.

Answer 1

이벤트 바인딩에 대해 조금 읽어야합니다. http://api.jquery.com/on/

처음에는 이해하기가 어렵지만 일단 그렇게하면 가치가 있습니다.

이와 같은 코드가 있다고 가정합니다. 이것은 당신이 설명하는 상황과 같은 예처럼

<div class="container"> 
    <div class="partial"> 
     <a href="#" class="magic-link">Click here to do stuff</a> 
    </div> 
</div> 

JS 코드는 아래의 개체 만이 결합 할 때 선물로 작동합니다 (일반적으로 document.ready())이 보인다.

$(".magic-link").click(function(){ 
    alert("Magic link clicked"); 
    return false; 
}) 

아직 페이지에로드되지 않은 객체에 발생하는 이벤트를 원하는 경우

는 당신은 사업부 즉 변경되지 않습니다 비트 컨테이너에 이벤트 처리기를 바인딩해야합니다. 이

$(".container").on("click", ".magic-link", function(){ 
    alert("Magic link clicked"); 
    return false; 
}); 

추천 이 이벤트는 이벤트 핸들러까지 거품 이벤트를 발생. 이것은 하나의 이벤트 핸들러가 잠재적으로 수백 개의 오브젝트에서 이벤트를 처리한다는 또 다른 이점이 있습니다. 지침으로 변경되지 않는 가장 가까운 부모 개체에 수신기를 바인딩하십시오. 예제의 경우 이것은 컨테이너 div입니다. 이것은 거품을 최소로 유지합니다.