Применение функций jQuery к добавленным элементам бесконечной прокрутки

Мне невероятно трудно найти ответ на этот вопрос. Должно быть, где-то похоронен ответ, но я его еще не нашел.

Короче говоря, у меня есть элементы, которые добавляются в цикл Wordpress с помощью Infinite Scroll. Однако я не использую плагины Isotope или Masonry для этого цикла, где меня прячут в неправильных ответах.

Вне моего сценария заголовка для вызова Infinite Scroll у меня есть множество других функций, загружаемых с (window).load(function(){... и из того, что я понимаю, добавленные элементы должны попасть в область видимости.

К сожалению, это не так.

Мой вопрос не должен (window).load выполнить на каждом применимом элементе даже после добавления новых элементов Ajax?

Код доступен по запросу, но я надеюсь, что это простой синтаксический ответ...

Источник

2 ответа

Решение

Ответ на ваш вопрос: нет, $(window).load() не срабатывает при добавлении элементов, а только при window объекты onload событие срабатывает, т.е. при завершении начальной загрузки страницы.

Предложение о делегировании события является вполне обоснованным, а о передаче обратного вызова при создании экземпляра бесконечного скроллера - даже более того. Предполагая, что вы используете этот плагин jQuery для бесконечной прокрутки, вы можете сделать что-то вроде:

$(window).load(function() {
    // [...]
    $('#infinite-scroll-element')
        .infinitescroll({ /* options */ },
                        // callback to handle binding events on newly added elements
                        function(newElements) {
                            // iterate across the elements just added
                            for (var i = 0; i < newElements.length; i++) {
                                var thisElement = newElements[i];
                                // bind your event handlers here, e.g.:
                                $(thisElement).click(function(evt) { /* ... */ });
                                $(thisElement).mouseover(function(evt) { /* ... */ });
                            };
                        });
    // [...]
};

Другие плагины предположительно предложат некоторую подобную функциональность.

Источник

Для последней версии http://www.infinite-scroll.com/ вместе с кладкой: http://masonry.desandro.com/ у меня работал следующий код:

 $grid.on( 'append.infiniteScroll', function( event, response, path, items ) {
        $(this).next(".info").slideToggle("fast"); 
      // OR your code you want to load after infinite scroll loads
    });

Проверьте здесь https://infinite-scroll.com/events.html

Источник
Другие вопросы по тегам