JQuery AJAX가로드됩니다. div가 자체 또는 상위 div를 다시로드하지 않습니다.

Question

이 일을 해요 :

$(function() { 
     $("#but").click(function() { 
       $('#bigHtml').load('@Url.Action("SecondPage")'); 
      }); 
}); 

<div id="bigHtml"> 
    <div id="but"></div> 
</div> 

하지만 작동하지 않습니다. 제가 불법적 인 일을하고 있습니까? (@ Url.Action이 제대로 작동 함)

Answer 1

을 (@ Url.Action가 제대로 작동)를 사용 .live() (광산을 강조) :

는 지금 에서, 현재의 선택과 일치하는 모든 요소의 이벤트 핸들러를 연결합니다 미래.

$("#but").live('click', function() { 
    $('#bigHtml').load('@Url.Action("SecondPage")'); 
}); 

코드에서

---

, 당신은 페이지 현재 하나 개의 #but 인스턴스에 이벤트 핸들러를 연결하고 있습니다. 컨텐트를 다시로드하면이 인스턴스가 제거되고 이벤트 리스너도 제거됩니다. 새 콘텐츠의 #but 요소는 다른 인스턴스입니다.

이벤트 처리기를 다시 바인딩하지 않습니다. JavaScript 코드가 호출되면 jQuery는 요소 #but을 찾고 완료됩니다. 새로운 콘텐츠를 삽입 한 후에는 해당 요소를 다시 보지 않습니다. live()은 이벤트 핸들러를 요소가 아니라 문서 루트에 연결함으로써이 문제점을 극복합니다.