Javascript not working on more loaded content

Question

I have this script where it adds some effects on my items listed.

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

However, when I click

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

load more button coded above, javascript i mentioned above is not working on loaded items...

How could I fix this...?

Thank you for you time!

Answer 1

The problem is that you're calling the "effects" script only on document.ready you need to call it when you add an item as well.

These are the steps you should take:

First make a "wrapper" function that does the "effects"

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

Then call it where you want the "effects" to happen.

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

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