如何在无限滚动加载页面上触发coffeescript

Question

我正在开发产品列表页面，更多产品加载无限滚动。问题是加载新页面时，产品＆＃39;缩略图上的点击事件。在加载的页面上将不会执行。通过单击产品的缩略图图像，图像必须交换。 我在这里使用的Carousel是jcarousel。

先谢谢

无限滚动：

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

下面是要在新加载的页面中执行的onclick函数

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

我相信你的问题与turbolinks有关，$(document).ready事件不会被turbolinks触发，因为如果页面是从浏览器缓存的，那么就没有实际的页面重新加载。您需要使用的事件是

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

如果您想查看信息，则

这是turbolinks 5 documentation。我只是在做假设，不能确定你的实际问题是什么，但问题是由于你的event在页面重新加载后没有被触发所以它是有意义的