[JQUERY] 로딩 후에 동적 HTML 클릭 이벤트를 추가 jQuery를 .live () CSTE 연구진 VS () 메소드

로딩 후에 동적 HTML 클릭 이벤트를 추가 jQuery를 .live () CSTE 연구진 VS () 메소드

해결법

1. ---

   1.동적으로로드되는 요소에 대한 작업에 클릭 핸들러를 원하는 경우에, 당신은 부모 객체에 이벤트 핸들러를 설정 (즉, 동적으로로드되지 않습니다) 그리고이 같은 동적 객체와 일치하는 선택을 제공합니다 :

   동적으로로드되는 요소에 대한 작업에 클릭 핸들러를 원하는 경우에, 당신은 부모 객체에 이벤트 핸들러를 설정 (즉, 동적으로로드되지 않습니다) 그리고이 같은 동적 객체와 일치하는 선택을 제공합니다 :

   $('#parent').on("click", "#child", function() {});
   

   이벤트 핸들러는 클릭 이벤트가 #child에 유래 그것에 버블 링 #parent 객체와 언제든지 첨부됩니다, 그것은 당신의 클릭 핸들러를 발사합니다. 이것은 위임 된 이벤트 처리 (이벤트 처리가 부모 객체에 위임)라고합니다.

   #child 객체가 아직 존재하지 않는 경우에도 당신이 #parent 객체에 이벤트를 첨부 할 수 있기 때문에이 방법을 수행,하지만 나중에 존재하고 #parent 개체, 클릭 이벤트 의지 거품을 클릭 도착하면, 그것은 것입니다 이 #child에 유래 이벤트 핸들러가 #child에 클릭에 대한이와 이벤트를 해고 것을 알 수있다.

2. ---

   2.이 시도:

   이 시도:

   $('#parent').on('click', '#child', function() {
       // Code
   });
   

   $ CSTE 연구진 () 문서에서 :

   당신이 그것을에 $ CSTE 연구진 ()를 호출 할 때 이벤트가 바인딩되지 않도록 귀하의 #child 요소가 존재하지 않는 ($ .live ()와는 달리). #parent 그러나,이 괜찮에 따라서 이벤트를 바인딩 존재 않습니다.

   단지 트리거에 대한 '필터'역할을 위의 내 코드의 두 번째 인수는 이벤트가 #child에서 #parent까지 버블 경우.

3. ---

   3.$ (문서) CSTE 연구진 (), 기능 ( '.selector'을 '클릭'{/ * 할 것들 * /});

   $ (문서) CSTE 연구진 (), 기능 ( '.selector'을 '클릭'{/ * 할 것들 * /});

   편집 : 나는 방법에 대해 좀 더 정보를 제공하고있어이 작품 때문에 ... 단어. 이 예제를 사용하면 전체 문서에 리스너를 배치하고 있습니다.

   당신이 어떤 요소 (들) 일치 .selector을 클릭하면 이벤트가 주 문서까지 거품 - 너무 오래 다른 청취자가 없습니다로 그 전화 event.stopPropagation () 메소드 - 부모에 이벤트의 버블 맨 것 집단.

   대신 요소의 특정 요소 또는 집합에 바인딩, 당신은 지정된 셀렉터에 일치하는 요소에서 오는 어떤 이벤트를 수신합니다. 자동으로 현재 기존의 요소뿐만 아니라 동적으로 추가 요소를 일치 하나 리스너, 한 시간을 만들 수있는이 수단.

   이것은 (대규모 애플리케이션에서) 성능과 메모리 사용을 포함한 몇 가지 이유, 스마트입니다

   편집하다:

   물론, 당신이들을 수있는 가장 가까운 부모 요소는 더 나은, 당신은 같은 문서 대신 모든 요소를 ​​사용할 수 있습니다 긴 아이들이 그 부모 요소 내에있는 이벤트를 모니터링 할로 ...하지만 정말 아무것도하지 않는 것을 질문으로한다.

4. ---

   4.이 같은 1.7 외모에 .live ()의 등가 :

   이 같은 1.7 외모에 .live ()의 등가 :

   $(document).on('click', '#child', function() ...); 
   

   기본적으로, 클릭 이벤트에 대한 문서를보고 #child 그들을 필터링합니다.

5. ---

   5.나는 늦게 답변을 좀 알고,하지만 난 .live () 메소드에 대한 polyfill을 만들었습니다. 내가 jQuery를 1.11에서 테스트했습니다, 그리고 그것은 꽤 잘 작동하는 것 같다. 나는 우리가 가능하면 CSTE 연구진 () 메소드를 구현하기로되어 있다는 것을 알고 있지만, 그것은 해당 CSTE 연구진은 모든 .live () 호출을 () 어떤 이유에서, 다음과 같은 힘에 대한 호출로 변환하는 것은 불가능 큰 프로젝트에서 작업:

   나는 늦게 답변을 좀 알고,하지만 난 .live () 메소드에 대한 polyfill을 만들었습니다. 내가 jQuery를 1.11에서 테스트했습니다, 그리고 그것은 꽤 잘 작동하는 것 같다. 나는 우리가 가능하면 CSTE 연구진 () 메소드를 구현하기로되어 있다는 것을 알고 있지만, 그것은 해당 CSTE 연구진은 모든 .live () 호출을 () 어떤 이유에서, 다음과 같은 힘에 대한 호출로 변환하는 것은 불가능 큰 프로젝트에서 작업:

   if(jQuery && !jQuery.fn.live) {
       jQuery.fn.live = function(evt, func) {
           $('body').on(evt, this.selector, func);
       }
   }
   

   그냥 당신이 jQuery를 장착 한 후에 그것을 포함하고 라이브 호출하기 전에 ().

6. ---

   6.CSTE 연구진은 ()의 jQuery 버전 1.7 이상입니다. 당신이 이전 버전이있는 경우, 이것을 사용 :

   CSTE 연구진은 ()의 jQuery 버전 1.7 이상입니다. 당신이 이전 버전이있는 경우, 이것을 사용 :

   $("#SomeId").live("click",function(){
       //do stuff;
   });
   

7. ---

   7.나는 내 프로젝트에서 '라이브'를 사용하지만 내 친구 중 하나는 내가 '에'대신 라이브 사용하도록 제안했다. 그리고 난 당신이 한 것 같은 문제를 경험 한 것을 사용하려고 할 때.

   나는 내 프로젝트에서 '라이브'를 사용하지만 내 친구 중 하나는 내가 '에'대신 라이브 사용하도록 제안했다. 그리고 난 당신이 한 것 같은 문제를 경험 한 것을 사용하려고 할 때.

   내 페이지에 동적으로 버튼 테이블 행 많은 DOM 물건을 만들 수 있습니다. 내가 마법을 사용할 때 사라졌다.

   다른 솔루션은 아이가 바로 모든 클릭에 때마다 함수를 호출처럼 사용 좋아한다. 하지만 난 다시 여기에 일어나는 솔루션을 만들 수있는 방법을 찾을 수 있습니다.

   코드를 같이 쓰기 :

   function caller(){
       $('.ObjectYouWntToCall').on("click", function() {...magic...});
   }
   

   ) (발신자 전화; 이 같은 페이지에 개체를 만든 후.

   $('<dom class="ObjectYouWntToCall">bla... bla...<dom>').appendTo("#whereeveryouwant");
   caller();
   

   이 페이지에없는 모든 클릭에 예상되는 때 함수가 호출이 방법으로.

from https://stackoverflow.com/questions/8752321/jquery-live-vs-on-method-for-adding-a-click-event-after-loading-dynamic-ht by cc-by-sa and MIT license