[JQUERY] 어떻게 jQuery를 동적 HTML 요소에 이벤트를 연결합니까? [복제]

어떻게 jQuery를 동적 HTML 요소에 이벤트를 연결합니까? [복제]

해결법

1. ---

   1.나중에 jQuery를 릴리스의 변경 사항을 반영하기 위해 새로운 답을 추가하고있다. .live () 메소드 jQuery를 1.7으로 중단된다.

   나중에 jQuery를 릴리스의 변경 사항을 반영하기 위해 새로운 답을 추가하고있다. .live () 메소드 jQuery를 1.7으로 중단된다.

   http://api.jquery.com/live/에서

   jQuery를 들어 1.7+ 당신은) (CSTE 연구진 사용하여 부모 요소에 이벤트 핸들러를 첨부하고, 인수로 'MyClass에'와 결합 선택기를 전달할 수 있습니다.

   http://api.jquery.com/on/ 참조

   그래서 대신에 ...

   $(".myclass").click( function() {
       // do something
   });
   

   당신은 쓸 수 있습니다...

   $('body').on('click', 'a.myclass', function() {
       // do something
   });
   

   이 여부를 이미 존재 또는 동적으로 나중에 추가, 본문에 'MyClass에'와 모든 태그를 작동합니다.

   예 더 가까이 태그를 둘러싼 정적하지만, CSTE 연구진은 메서드 호출이 작동 발생할 때 존재하는 모든 부모 태그 없었다과 같이 body 태그는 여기에 사용됩니다. 예를 다음과 같이 보일 것이다 추가 동적 요소를해야합니다 목록에 대한 UL 태그 :

   $('ul').on('click', 'li', function() {
       alert( $(this).text() );
   });
   

   만큼 UL 태그이 의지 작업을 존재 (더 리 요소는 아직 존재 필요가 없다).

2. ---

   2.때때로이 (답을 상단-투표)는 항상 충분하지 않습니다 일 :

   때때로이 (답을 상단-투표)는 항상 충분하지 않습니다 일 :

   $('body').on('click', 'a.myclass', function() {
       // do something
   });
   

   순서의 이벤트 핸들러가 실행되기 때문에이 문제가 될 수 있습니다. 당신은 자신이 일을하지만, 그것 때문에이 처리되는 순서의 문제를 일으키는 발견하면 .. 당신은 항상 함수로 그것을 포장 할 수있다 "새로 고침"리스너라는 때.

   예를 들면 :

   function RefreshSomeEventListener() {
       // Remove handler from existing elements
       $("#wrapper .specific-selector").off(); 
   
       // Re-add event handler for all matching elements
       $("#wrapper .specific-selector").on("click", function() {
           // Handle event.
       }
   }
   

   이 함수이기 때문에 나는이 길을 내 리스너를 설정할 때마다, 나는 일반적으로 준비 문서에 전화 :

   $(document).ready(function() {
       // Other ready commands / code
   
       // Call our function to setup initial listening
       RefreshSomeEventListener();
   });
   

   당신이 어떤 동적으로 추가 요소를 추가 할 때마다 그런 다음, 다시 그 메소드를 호출합니다

   function SomeMethodThatAddsElement() {
       // Some code / AJAX / whatever.. Adding element dynamically
   
       // Refresh our listener, so the new element is taken into account
       RefreshSomeEventListener();
   }
   

   희망이 도움이!

   문안 인사,

3. ---

   3.jQuery를 1.7 후에 바람직한 방법은 CSTE 연구진 () 및 .OFF ()

   jQuery를 1.7 후에 바람직한 방법은 CSTE 연구진 () 및 .OFF ()

   숀의 대답은 예를 보여줍니다.

4. ---

   4.대신 이벤트 위임에 DOM,보기에 앵커의 더미를 추가하는 경우.

   대신 이벤트 위임에 DOM,보기에 앵커의 더미를 추가하는 경우.

   다음은 간단한 예제입니다 :

   $('#somecontainer').click(function(e) {   
     var $target = $(e.target);   
     if ($target.hasClass("myclass")) {
       // do something
     }
   });
   

5. ---

   5.당신은 모든 요소에 대한 페이지에 단 한번의 클릭 이벤트를 바인딩 할 수 있습니다, 그들은 해당 페이지에 이미 또는 경우에 상관없이 그들이 어떤 미래의 시간에 도착하는 경우, 같은 :

   당신은 모든 요소에 대한 페이지에 단 한번의 클릭 이벤트를 바인딩 할 수 있습니다, 그들은 해당 페이지에 이미 또는 경우에 상관없이 그들이 어떤 미래의 시간에 도착하는 경우, 같은 :

   $(document).bind('click', function (e) {
      var target = $(e.target);
      if (target.is('.myclass')) {
         e.preventDefault(); // if you want to cancel the event flow
         // do something
      } else if (target.is('.myotherclass')) {
         e.preventDefault();
         // do something else
      }
   });
   

   잠시 동안 그것을 사용하고. 매력처럼 작동합니다.

   jQuery를 1.7 이상에서, 그것은 결합 또는 다른 이벤트 위임 방법 대신에 사용 CSTE 연구진은 ()에 권장하지만, .bind ()는 여전히 작동합니다.

6. ---

   6.귀속 모든 전류 (클릭 등) 이벤트에 대한 핸들러 - 미래 - 일치하는 요소입니다. 또한 사용자 정의 이벤트를 바인딩 할 수 있습니다.

   귀속 모든 전류 (클릭 등) 이벤트에 대한 핸들러 - 미래 - 일치하는 요소입니다. 또한 사용자 정의 이벤트를 바인딩 할 수 있습니다.

   링크 텍스트

   $(function(){
       $(".myclass").live("click", function() {
           // do something
       });
   });
   

7. ---

   7.당신의 jQuery를에 1.3 이상 후) (.live 사용하는 경우

   당신의 jQuery를에 1.3 이상 후) (.live 사용하는 경우

8. ---

   8.당신은 라이브 () 함수를 사용하고 싶습니다. 해당 문서를 참조하십시오.

   당신은 라이브 () 함수를 사용하고 싶습니다. 해당 문서를 참조하십시오.

   예를 들면 :

   $("#anchor1").live("click", function() {
       $("#anchor1").append('<a class="myclass" href="#">test4</a>');
   });
   

from https://stackoverflow.com/questions/1359018/how-do-i-attach-events-to-dynamic-html-elements-with-jquery by cc-by-sa and MIT license