[JQUERY] JQuery와 이벤트는 아약스 호출 후에 발생하지 않습니다

JQuery와 이벤트는 아약스 호출 후에 발생하지 않습니다

해결법

1. ---

   1.당신이 요소를 제거하고 (자바 스크립트를 통해) 교체하면 페이지로드에 추가 된 모든 이벤트 바인딩을 잃는다.

   당신이 요소를 제거하고 (자바 스크립트를 통해) 교체하면 페이지로드에 추가 된 모든 이벤트 바인딩을 잃는다.

   (이것은 또한 페이지 로딩 후 페이지에 추가 콘텐츠에 적용된다 - 즉 AJAX 로딩 콘텐츠)

   여기에는 몇 가지 가능한 해결책이 있습니다.

   1) "바인딩"코드를 캡슐화 및 페이지로드에 바로 문제의 요소가 다시 페이지에 추가됩니다 후 모두를 호출합니다. 예를 들면 :

   $(document).ready(function(){
       // bind event handlers when the page loads.
       bindButtonClick();
   });
   
   function bindButtonClick(){
       $('.myClickableElement').click(function(){
           ... event handler code ...
       });
   }
   
   function updateContent(){
       $.ajax({
           url : '/ajax-endpoint.php',
           data : {'onMyWay' : 'toServer'},
           dataType : 'html',
           type : 'post',
           success : function(responseHtml){
               // .myClickableElement is replaced with new (unbound) html element(s)
               $('#container').html(responseHtml);
   
               // re-bind event handlers to '.myClickableElement'
               bindButtonClick();  
           }
       });
   }
   

   2) 더 우아한 방법은이 문제를 처리하기 : jQuery의 CSTE 연구진 () 메서드를 사용합니다. 즉 페이지에서 제거됩니다 결코 요소 - 그것으로, 당신은 이벤트 대상 이외의 요소에 바인드 이벤트 핸들러 할 수 있습니다.

   $(document).ready(function(){
       $('body').on('click','.myClickableElement',function(){
           ... event handler code ....
       });
   });
   

   일부 추가 설명 :

   CSTE 연구진 () 메소드를 사용하는 이벤트 위임은 이벤트 처리기 코드 (3 인자)을 유지하기 위해 부모 요소를 이야기하고, 이벤트 대상 (2 인수)이 수행 이벤트의 특정 유형 (1 인자)가 때를 발사합니다.

   당신은 1.7을 사용 본질적으로 같은 일을 지금은 사용되지 않는 대리자 메서드 이전에 jQuery를 버전을 사용하는 경우.

   또한, 방식 때문에 이벤트 DOM 트리를 통해 "버블", 이벤트 대상 (CSTE 연구진 () 메소드의 두번째 인수)의 위임 요소 (jQuery를 객체의 선택)의 후손이어야한다는 지적 가치입니다. 예를 들어, 다음은 작동하지 않을 것입니다

   <div id="container-1">
       <div>
           <div id="another-div">
               Some Stuff
           </div>
       </div>
   </div>
   
   <div id="container-2">
       <a id="click-me">Event Target!!!</a>
   </div>
   
   <script type="text/javascript">
       $('#container-1').on('click','#click-me',function(){
           ... event handler code ....
           // This will never execute, should've used '#container-2', or 'body', or 'document' instead of '#container-1'
       });
   </script>
   

   페이지 일반적으로 모든 요소가 후손이기 때문에 신체 또는 문서 요소는 일반적으로 안전한 선택입니다.

2. ---

   2.당신은 DIV의 이벤트 스크립트를 둘러싸 동적으로 내용을로드 한 후 완전히 대체 명령을 실행할 수 있습니다.

   당신은 DIV의 이벤트 스크립트를 둘러싸 동적으로 내용을로드 한 후 완전히 대체 명령을 실행할 수 있습니다.

   <div class="somescript">
   -- Event Script that you want to map with dnamically added content
   <div>
   

   - 동적 콘텐츠를로드하고 후 명령 아래를 실행합니다.

   $(".somescript").replaceAll($(".somescript"));
   

   동적으로로드 된 내용이 실행 된로드 명령을 대체되면, 이벤트가 매핑됩니다와 코드가 잘 실행됩니다.

3. ---

   3.내 의견 미안, 너무 깁니다.

   내 의견 미안, 너무 깁니다.

   그냥 질문과 코멘트, 나는 이것이 이전 게시물 것을 볼 수 있지만. 컨텐츠 핸들러를 연결 {) 대 함수를 (사용하여 AJAX를 사용하여 반환 (} {), '', 기능 (예를 #xxx을 '클릭')가 $ (문서) CSTE 연구진은 : 나는 문제가 사용 많이왔다 $ ( '# xxx를) CSTE 연구진 ('} {) '기능 (예 클릭);} 성공과 AJAX 호출이 반환은 그 방법을 사용하는 트릭이나 가이드 라인의 어떤 종류가 있나요 후 나는 위임을 얻을 부르심있다.? 참여, 나는 것을 사용하여 시도했지만 그렇지 종종 작업을 수행합니다. 나는 주위를 둘러싸는 요소에 위임 시도 할 수 있습니다. 어쩌면 않습니다 어떤 이유로 문서 또는 몸에하지 거품까지?

from https://stackoverflow.com/questions/13767919/jquery-event-wont-fire-after-ajax-call by cc-by-sa and MIT license