CODEWITHSUNDEEP
javascriptjqueryajaxdocument-ready
Hirohito Yamada
Hirohito Yamada

Reputation: 387

Javascript not working on more loaded content

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!

Upvotes: 0

Views: 252

Answers (1)

Mihailo
Mihailo

Reputation: 4917

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();
}

Upvotes: 1

Related Questions