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

Question

我正在处理产品列表页面，更多产品加载了无限滚动。问题是当新页面加载时，加载页面上 'thumbnail of the product' 上的点击事件将不会执行。通过单击产品的缩略图图像，图像必须交换。我这里用的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

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

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

这是 turbolinks 5 documentation 如果您想查看信息。我只是在做假设，不能真正确定你的实际问题是什么，但问题是由于你的 event 在页面重新加载后没有被触发所以它是有道理的

Answer 2

通过如下更改 onclick 函数解决了问题：

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

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

How to trigger the coffeescript on infinite-scroll loaded page

javascript

jquery

ruby-on-rails

coffeescript

无限卷轴：