無限スクロールで読み込まれたページでcoffeescriptをトリガーする方法

Question

私は製品リストのページで作業していますが、より多くの製品が無限のスクロールで読み込まれています。問題は、新しいページが読み込まれ、読み込まれたページの「製品のサムネイル」のオンイベントが実行されない場合です。製品のサムネイルイメージをクリックすると、イメージを交換する必要があります。 私がここで使ってきたカルーセルはジャカルーです。アドバンス

無限スクロールで

ありがとう：以下

$(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

で実行されるのonclick関数である私はyoour問題が接続されていると信じてターボリンクでは、ページがブラウザからキャッシュされた場合に実際のページリロードがないため、$(document).readyイベントはターボリンクではトリガされません。あなたが使用する必要があるイベントは、あなたが情報を確認したい場合は、これはturbolinks 5 documentationある

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

です。私はちょうど仮定をしている、あなたの実際の問題は何かを本当に確かめることはできませんが、問題はページリロードの後に​​起動されていないので、あなたのeventから引き起こされます