protonet / jquery.inview

A jQuery plugin that adds a bindable 'inview' event for detecting when an element is scrolled into view.
blog.protonet.info/post/2516624585/jquery-inview-plugin
Do What The F*ck You Want To Public License
1.67k stars 488 forks source link

Function .on is not working after ajax call #48

Closed wpsoul closed 9 years ago

wpsoul commented 9 years ago

.live function is working ok, but it was deprecated from jquery 1.9

When I try to use .on instead - it's working only before ajax call

wpsoul commented 9 years ago

Sorry, problem is found

.live function can be attached to triggered element that loads after ajax call, .on function can't do this. When I attached .on function to body element issue was resolved

Correct example with .on

jQuery('body').on('inview', '.home_picker_next span', function(e){

Not correct

jQuery('.home_picker_next').on('inview', 'span', function(e){
nextgenthemes commented 8 years ago

Actually this does not work correctly

Body was not working for me at all, so i used document as this is what people seem to be doing when attaching events to be working with AJAX. Problem is that the $($this) will hold all elements of the selector then. And will also now with with one as it will be triggered one time and then never again. I need to have it triggered for each element once so I guess i will use ajaxComple() and create the events new every time after AJAX calls, not sure of this works of they are done without jQuery.

    //$(document).on( 'inview', '.arve-use-inview [data-arve-mode="lazyload"]', function( event, isInView ) { // NOT WORKING will have all elements in $this
    $('.arve-use-inview [data-arve-mode="lazyload"]').one( 'inview', function( event, isInView ) {
        console.log($(this));
      if ( isInView ) {
        load_video( $(this) );
      }
    });