By vegantriathlete on

I have posted a support request in the issue queue for Views Infinite Scroll asking for a workaround to the issue that only the items loaded on the first page respond to my jQuery function. The items that are loaded through the auto page function do not. Any ideas?

Update: The same problem occurs with Views Infinite Pager. Is there a way to have the ajaxed-in items appended into the HTML? I'm guessing that the reason the jQuery function doesn't act on them is that it doesn't see them on account of their not being in the HTML on the page.

⋅ Categories: Drupal 6.x

Comments

vegantriathlete’s picture

vegantriathlete
he/him/his
Primary language English
Location Lakewood, CO
commented

I think that this may have to do with when the event is bound. You can find good information and other links here:

http://docs.jquery.com/Frequently_Asked_Questions#Why_do_my_events_stop_...

I'll post my solution in the support request from above. Check there if you are interested.

http://blog.marceisaacson.com

vegantriathlete’s picture

vegantriathlete
he/him/his
Primary language English
Location Lakewood, CO
commented

I can say with absolute certainty that the issue I was having was with the fact that the jQuery event wasn't being bound to the items that were added to the DOM through the auto page function.

I'm using the live() method to allow my event to be triggered by items in the DOM, whether they were there initially or not. Note, that this requires at least jQuery 1.3. So, I am using the jQuery Update module.

This addresses the problem with the function not being triggered on the items added to the DOM dynamically. So, for most people you've got your answer.

Unfortunately for me, I still haven't found a complete workaround for my use case and I've spent so many hours on this. I have a partial solution running right now (http://dev.furnishbling.com) and I've commented the code to say where things stand.

Basically, if I try to implement a mouseout function, the slider just keeps sliding up and down while the mouse is over the area. It continues to do so even after mousing out because the buffer has data stored in it. I believe this is due to the way the mouseover and mouseout events behave. So, right now, I just have the mouseover function enabled.

I can't get this to work at all with hover (mouseenter/mouseleave). I don't think this is surprising, because I don't think these events bubble up. Therefore, the live() function won't work.

Anybody have any suggestions?

http://blog.marceisaacson.com

kla2t’s picture

kla2t commented

If your configuration permits updating to jQuery 1.7 (at least the latest dev version of jQuery Update for Drupal 7 has the option to choose jQuery 1.7), try the .on() instead of the .live() method.
I succeeded in bypassing the AJAX limitations of Views Infinite Scroll with something like this: 

   $(document).on("mouseenter", ".views-row", function(){
      $(this).children(".views-field-field-images").fadeIn();
   });
   $(document).on("mouseleave", ".views-row", function(){
      $(this).children(".views-field-field-images").fadeOut();
   });