SimpleModal Popup for posts not working with posts called by ajax

Go To StackoverFlow.com

1

I have a loop of posts that I use infinite scroll to paginate. I use SimpleModal to call a full post popup of each post but it only works on the posts that are loading initially. Any post called by the infinite scroll just clicks through to the actual post page. Why is that happening?

2012-04-05 22:10
by Pollux Khafra


1

That's because your SimpleModal function is applied to all posts that exist on the page when the document is loaded.

The infinte scroll thing will fire ajax requests and add new posts (excerpts) on the page, after the document is loaded.

What you need to do is to attach the SimpleModal function on click events registered in the future as well. So if you have something like:

$('.post').click(function(){
  // show modal
});

change it to

$('.post').on('click', function(){
  // show modal      
});

I'm assuming here these scripts are jQuery plugins.

See $.on()

2012-04-07 17:04
by nice ass
I see what you're saying but that made both the popup and infinite scroll stop working - Pollux Khafra 2012-04-07 17:17
Right it's SimpleModal, Infinite Scroll, and Masonry plugin - Pollux Khafra 2012-04-07 17:28
Post the code you have, or a link to a page relevant to your - nice ass 2012-04-07 17:37
The site isn't public yet but here's the function the way you suggested for the popup minus the full script for simplemodal. http://pastebin.com/X61C5Je - Pollux Khafra 2012-04-07 17:52
$.on() only works in jQuery 1.7+. If you have an older version, then use live(): jQuery('a.postpopup').live('click', function..., or delegate(): jQuery('.container').delegate('a.postpopup', 'click', function...nice ass 2012-04-07 18:36
Boom! Totally solved it. Thanks for solving that and being way smarter than me - Pollux Khafra 2012-04-07 18:41
Just so you know, you can pass $ to the function you bind on document.ready. This way you can safely use $ instead of jQuery within your function. Also, if the id variable is not meant to be global, define it first with the var keyword - nice ass 2012-04-07 18:45
Ads