.on 및 .delegate가있는 경우에도 jQuery가 Ajax로드 요소에 적용되지 않음

Question

Django와 Django Endless Pagination 및 Twitter 스타일로드를 사용하고 있습니다. 내 연구에서 읽은 것처럼 .on 및 .delegate를 사용 했음에도 불구하고 새로 삽입 된 요소에 바인딩 할 jQuery 코드를 가져올 수 없습니다. 나는 그것의 비난받는 상태 때문에 .live를 피했다. 그러나 명백하게 .on과 .delegate는이 상황에서 같은 일을 어떻게해서든지해야한다.

기본적으로 제품 검색 결과는 Endless Pagination이 삽입하는 카드로 표시됩니다.

관련 코드 조각 :

JS

$(".product-card").on('click',function() { 

    cardToggle = $(this).data("switch"); 

    if (cardToggle==0) { 
     // some stuff happens to the card 
     $(this).data("switch", 1); 
    }else if(cardToggle==1) { 
     // some stuff un-happens to the card 
     $(this).data("switch", 0); 
    } 
}) 

제품 목록 (아약스 메인 페이지에로드의 템플릿)

{% load static %} 
{% load endless %} 

{% paginate results %} 
{% for result in results %} 

    {# divs with class .product-card are created here, code for card removed because of prohibitive length #} 

{% endfor %} 
{% show_more %} 

Answer 1

.click()이 .on('click') 단지 속기이다. 따라서 .on()을 사용하더라도 작동하지 않습니다. 동적으로 생성 된 요소에 대한 , 다음과 같은 구문을 사용하여 이벤트 위임을 처리 할 수 ​​있습니다

그래서를 기반으로

(parentselector).on(event,selector,function(){}); 

,

$('.product-card').on('click',function() {}); // this is wrong 

이

$(document).on('click','.product-card',function() {}); // this will work