infinite scroll javascript already fired

Question

I have a site which loads items and uses the jquery infinite scroll plug in to load more items as a user scrolls.

When a user hovers over an item, more small divs are shown over the item. Simple. Which divs are shown on hover depends on which page a user is on, therefore they are dependant on knowing which page they are on. I use a simple variable to sort that out.

I use the following js to decide which divs are shown. eg from homepage

<script>
  $(".list_item_image").mouseenter(function () {
    $(this).children(".gl_view2").show();
    $(this).children(".gl_relist").show();
  });
  $('.list_item_image').mouseleave(function() {
    $(this).children(".gl_view2").hide();
    $(this).children(".gl_relist").hide();
  });
</script>

The divs (gl_view2 & gl_relist) are initially loaded but with display:none;

Now, this js is loaded into the footer to ensure its after the divs in question.

Lets say I have infinite scroll set to update 15 items at a time

This all works perfectly (meaning on mouseenter the divs which should be shown/overlaid, are shown) for the first 15 items, but after that the items load but the mouseenter simply does not work anymore. I'm guessing this is because the js has loaded and when the next items are loaded onto the page the js doesn't have any effect.

To load the next items with infinite-scroll I am using:

<nav id="page_nav"><a href="/pages/infinScrollGather.html?page_offset=2&currentpage=homepage"></a></na‌v>

I've also tried loading the js in after each item but still only works for the first 15.

I have also tried but this didn't work at all:

$("body").on("mouseenter", ".list_item_image", function () {
...
});

$("body").on("mouseleave", ".list_item_image", function () {
...
});

Has anyone come across anything like this before? Any ideas for a fix?

Your plugin still makes an ajax call to the url in the href to fetch the next 15 items right? Could you add a sample of the response you get from this ajax call? — Amith George
– Amith George, Commented Aug 27, 2012 at 10:33

Fabrizio Calderan · Accepted Answer · 2012-08-27 09:46:54Z

1

you should use event delegation with on() method like so

$("body").on("mouseenter", ".list_item_image", function () {
  ...
});

$("body").on("mouseleave", ".list_item_image", function () {
  ...
});

this will attach your handlers also on newer elements injected later on the DOM via ajax

only if you are using an older version of jQuery use delegate(), on() otherwise

edited Aug 27, 2012 at 9:46

answered Aug 27, 2012 at 9:40

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

StudioTime Over a year ago

Thats not working at all now I'm afraid - the infinite scroll is not loaded using ajax, but using <nav id="page_nav"><a href="/pages/infinScrollGather.html?page_offset=2&currentpage=homepage"></a></nav>

Amith George Over a year ago

@DarrenSweeney, could you elaborate on what you mean by "is not loaded using ajax". Please share working code for the infinite loading. If it works for the first 15 images and not the next 15, it usually means event delegation needs to be used. Also, please elaborate on what is not working.

Fabrizio Calderan Over a year ago

you should post a demo page or a fiddle with a reduced example of your code

StudioTime · Accepted Answer · 2012-08-27 11:22:35Z

0

Fixed (I hope so anyway)

It seems the js was missing being wrapped in: $(document).ready(function(){ ... });

Thanks for all help.

answered Aug 27, 2012 at 11:22

StudioTime

24.4k40 gold badges129 silver badges217 bronze badges

Collectives™ on Stack Overflow

infinite scroll javascript already fired

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related