Javascript 无法处理更多已加载的内容

Question

我有这个脚本，它在我列出的项目上添加了一些效果。

$(document).ready(function(){
  $('.ui.card.work .image').dimmer({
    on: 'hover'
  });
  $('.carouselCollaborators')
    .popup({
      boundary: '.ui.card.work',
    });
})

但是，当我点击

  = link_to_next_page @works, 'Load more...', params: params, :remote => true, id:'view_more', class: 'fluid ui basic button'

上面编码的加载更多按钮，javascript 我上面提到的在加载的项目上不起作用...

我该如何解决这个...？

感谢您的宝贵时间！

Answer 1

问题是您仅在 document.ready 上调用 "effects" 脚本，您也需要在添加项目时调用它。

这些是您应该采取的步骤：

首先制作一个“包装器”函数来执行“效果”

function card_effects(){
  $('.ui.card.work .image').dimmer({
    on: 'hover'
  });
  $('.carouselCollaborators').popup({
    boundary: '.ui.card.work',
  });
}

然后在您希望“效果”发生的地方调用它。

$(function(){ // jQuery document.ready shorthand
  card_effects();
});

function that_adds_new_items(){
  /***functions-code***/
  
  card_effects();
}

Javascript 无法处理更多已加载的内容

Javascript not working on more loaded content

javascript

jquery

ajax

document-ready

这些是您应该采取的步骤：