무한 스크롤 로딩 된 페이지에서 coffeescript를 트리거하는 방법

Question

제품 목록 페이지에서 더 많은 제품이 무한 스크롤과 함께로드됩니다. 문제는 새 페이지가로드되고로드 된 페이지의 '제품 축소판 그림'에 대한 클릭 이벤트가 실행되지 않는 경우입니다. 제품의 축소판 이미지를 클릭하면 이미지를 교환해야합니다. 내가 여기 사용했던 회전 목마가 jcarousel입니다.

무한 스크롤 미리

감사 : 아래

$(document).ready -> 
$("#home-products").infinitescroll 
navSelector: "nav.pagination" 
nextSelector: "nav.pagination a[rel=next]" 
itemSelector: "#home-products #products" 

는

$('.product .v-color').on 'click', (e)-> 
e.preventDefault() 
$this = $(@) 
$product = $this.closest('.product') 
$product.find('.v-color').removeClass('active') 
number = $this.data('carousel-number') 
$product.find('.carousel').carousel(number) 
$this.addClass('active') 
changePrice($product, $this.data('price'), $this.data('soldout'), 
$this.data('backorderable')) 

Answer 1

아래와 같이 onclick 기능을 변경하여 문제를 해결했습니다. :

$(document).on 'click', '.product .v-color', (e)-> 

Answer 2

나는 yoour 문제가 연결된 믿고 새로로드 페이지에서 실행되어야하는 온 클릭 기능입니다 터보 링크의 경우 브라우저에서 페이지를 캐싱 한 경우 실제 페이지를 다시로드 할 수 없기 때문에 터보 링크로 인해 $(document).ready 이벤트가 트리거되지 않습니다. 사용해야하는이 행사는 정보를 확인하려면이이 turbolinks 5 documentation입니다

document.addEventListener("turbolinks:load", function() { 
    // you js code 
}) 

입니다. 나는 단지 가정을하고 있지만 실제 문제는 무엇인지 확실하게 알 수는 없지만 문제는 페이지를 다시로드 한 후에 트리거되지 않는 event에서 발생합니다.