[JQUERY] Ajax로드 된 콘텐츠에 이벤트를 바인딩하는 방법은 무엇입니까?

Ajax로드 된 콘텐츠에 이벤트를 바인딩하는 방법은 무엇입니까?

해결법

1. ---

   1.동적으로 생성 된 요소에 대한 이벤트 위임을 사용하십시오.

   동적으로 생성 된 요소에 대한 이벤트 위임을 사용하십시오.

   $(document).on("click", '.mylink', function(event) { 
       alert("new link clicked!");
   });
   

   이것은 실제로 작동합니다. 여기에서는 데이터 대신 class .mylink가있는 앵커를 추가하는 예제가 있습니다. http://jsfiddle.net/efjzg/

2. ---

   2..on ()이 호출 된 후에 콘텐츠가 추가되면로드 된 콘텐츠의 상위 요소에 위임 된 이벤트를 만들어야합니다. 이는 이벤트 핸들러가 'on ()이 호출 될 때 (일반적으로 페이지로드에 있음)가 묶여 있기 때문입니다. .on ()이 호출 될 때 요소가 존재하지 않으면 이벤트가 바인딩되지 않습니다!

   .on ()이 호출 된 후에 콘텐츠가 추가되면로드 된 콘텐츠의 상위 요소에 위임 된 이벤트를 만들어야합니다. 이는 이벤트 핸들러가 'on ()이 호출 될 때 (일반적으로 페이지로드에 있음)가 묶여 있기 때문입니다. .on ()이 호출 될 때 요소가 존재하지 않으면 이벤트가 바인딩되지 않습니다!

   이벤트는 DOM을 통해 전파되므로 페이지가로드 될 때 우리가 알고있는 상위 요소 (아래 예제의 pdapent-element)에 위임 된 이벤트를 생성하여 해결할 수 있습니다. 방법은 다음과 같습니다.

   $('.parent-element').on('click', '.mylink', function(){
     alert ("new link clicked!");
   })
   

   주제에 대해 좀 더 읽는 것 :

3. ---

   3.귀하의 질문이 "Ajax로드 된 콘텐츠에 이벤트를 바인딩하는 방법"이면 다음과 같이 할 수 있습니다.

   귀하의 질문이 "Ajax로드 된 콘텐츠에 이벤트를 바인딩하는 방법"이면 다음과 같이 할 수 있습니다.

   $("img.lazy").lazyload({
       effect : "fadeIn",
       event: "scrollstop",
       skip_invisible : true
   }).removeClass('lazy');
   
   // lazy load to DOMNodeInserted event
   $(document).bind('DOMNodeInserted', function(e) {
       $("img.lazy").lazyload({
           effect : "fadeIn",
           event: "scrollstop",
           skip_invisible : true
       }).removeClass('lazy');
   });
   

   그래서 당신은 당신이 당신의 구성을 당신의 모든 당신의 모든 것을 ajax 코드에 배치 할 필요가 없습니다.

4. ---

   4.jQuery 1.7에서는 .live () 메서드가 사용되지 않습니다. .on ()을 사용하여 이벤트 핸들러를 첨부하십시오.

   jQuery 1.7에서는 .live () 메서드가 사용되지 않습니다. .on ()을 사용하여 이벤트 핸들러를 첨부하십시오.

   예 -

   $( document ).on( events, selector, data, handler );
   

5. ---

   5.솔루션을 아직도 찾고있는 사람들을 위해 최선의 방법은 문서 자체에 이벤트를 바인딩하고 이벤트에 "준비"에 바인딩하지 않는 것입니다. 예 :

   솔루션을 아직도 찾고있는 사람들을 위해 최선의 방법은 문서 자체에 이벤트를 바인딩하고 이벤트에 "준비"에 바인딩하지 않는 것입니다. 예 :

   $(function ajaxform_reload() {
   $(document).on("submit", ".ajax_forms", function (e) {
       e.preventDefault();
       var url = $(this).attr('action');
       $.ajax({
           type: 'post',
           url: url,
           data: $(this).serialize(),
           success: function (data) {
               // DO WHAT YOU WANT WITH THE RESPONSE
           }
       });
   });
   

   });

6. ---

   6.AJAX 응답이 예를 들어 HTML 양식 입력이 포함되어있는 경우 다음과 같을 것입니다.

   AJAX 응답이 예를 들어 HTML 양식 입력이 포함되어있는 경우 다음과 같을 것입니다.

   $(document).on("change", 'input[type=radio][name=fieldLoadedFromAjax]', function(event) { 
   if (this.value == 'Yes') {
     // do something here
   } else if (this.value == 'No') {
     // do something else here.
   } else {
      console.log('The new input field from an ajax response has this value: '+ this.value);
   }
   
   });
   

7. ---

   7.대신 jquery.live ()를 사용하십시오. 문서 여기

   대신 jquery.live ()를 사용하십시오. 문서 여기

   예를 들어,

   $("mylink").live("click", function(event) { alert("new link clicked!");});
   

8. ---

   8.ASP.NET의 경우 다음을 시도하십시오.

   ASP.NET의 경우 다음을 시도하십시오.

   <script type="text/javascript">
       Sys.Application.add_load(function() { ... });
   </script>
   

   이것은 페이지로드 및 업데이트 패널로드에서 작동하는 것으로 보입니다.

   여기에서 전체 토론을 찾으십시오.

from https://stackoverflow.com/questions/16598213/how-to-bind-events-on-ajax-loaded-content by cc-by-sa and MIT license