How to trigger the coffeescript on infinite-scroll loaded page

Question

I am working on product listing page more products are loaded with infinite scroll. The problem is when the new page is loaded, the on click event on the 'thumbnail of the product' on the loaded page will not execute. By clicking the thumbnails image of the product,the images must swap. The Carousel i have used here is the jcarousel.

Thanks in Advance

Infinite Scroll:

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

Below is the onclick function which is to be executed in the newly loaded page

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

I believe yoour problem is connected to turbolinks, the $(document).ready event is not triggered with turbolinks, because there is no actual page reload if the page was cached from the browser. The event you need to use is

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

this is the turbolinks 5 documentation if you want to check info. I am just making assumptions, can not really be sure what is your actual problem, but the problem is caused from your event not being triggered after the page reload so it makes sense