Проблема с бесконечной прокруткой + .on () - PullRequest
Новая
       20

Проблема с бесконечной прокруткой + .on ()

0 голосов
/ 27 марта 2012

Я пытаюсь, чтобы динамически загружаемый контент (с помощью сценария Infinite Scroll: http://www.infinite -scroll.com / ) был стилизован при запуске пользовательским событием inview (https://github.com/protonet/jquery.inview).

Мой код выглядит так: 

$(document).on("inview", ".attachment-portfoliosmall", function(e) {
    if( $.data( this, "styleappended" ) ) {
    return true;
    }
    $.data( this, "styleappended", true ); 
    $(".attachment-portfoliosmall").css('visibility','visible').hide().fadeIn('slow');
    $(".attachment-portfoliosmall").parent(".portfoliopreload").css("background", "none");
});

Как вы можете ясно видеть, подпрограмма $ .data используется для того, чтобы гарантировать, что обработчик события .on () не будет выполнен более одного раза для каждого элемента в фильтре выбора.

Этот код прекрасно работает в теории, за исключением того, что после добавления к документу динамически загружаемого содержимого на следующей странице подпрограмма .on () запускается второй раз для каждого отдельного элемента, а не только для недавно добавленного элементы.

Вы можете понять, что я имею в виду, зайдя на мой сайт, где находится этот код: hxxp: //www.riddlepark.fm/

Если вы перейдете на следующую страницу, вы увидите, что все элементы исчезают и снова возвращаются, что вызвано обработчиком события .on ().

Как я могу предотвратить его выполнение на ранее обработанных элементах на предыдущих страницах?

1 Ответ

0 голосов
/ 27 марта 2012

вот что я имею в виду в своем комментарии. 

$(document).on("inview", ".attachment-portfoliosmall", function(e) {
    var $this = $(this);
    if(!$this.hasClass('loaded')) {
        $this.addClass('loaded'); 
        $this.css('visibility','visible').hide().fadeIn('slow');
        $this.parent(".portfoliopreload").css("background", "none");
    }
});

Что-то подобное может сработать для вас.

...