Как выполнить Javascript на загруженной странице с бесконечным прокруткой

Question

Я работаю над листинговой страницей продукта. infinite scroll Проблема в том, что при загрузке новой страницы событие jQuery on click на загруженной странице не будет выполняться, когда пользователь нажмите «добавить в корзину». скрипт работал бы, если бы он был загружен с помощью jquery load(). но бесконечный свиток использует что-то еще, как я не знаю.

$(document).ready(function() { 
    jQuery_1_6_1('#mycontent').infinitescroll({ 
    navSelector: "#mynext:last", 
    nextSelector: "#mynext:last", 
    itemSelector: "#mycontent", 
    debug: false, 
    dataType: 'html', 
    maxPage: <?php echo $pages_load;?>, 
    path: function(index) { 
     return "pages/index" + index + ".html"; 


     } 
     // appendCallback : false, // USE FOR PREPENDING 
    }, function(newElements, data, url) { 

    }); 
}); 

Answer 1

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

Если предположить, что добавить в корзину кнопки имеют класс «AddToCart» вы могли бы сделать что-то вроде этого:

$(document).on('click', '.addtocart', function(){ 
    // handle click here 
}); 

Он работает путем передачи события прослушивания элемента-предка (например, document), то он применяется селектор jquery к элементам в цепочке пузырьков, тогда он применяет вашу функцию события к соответствующим элементам, вызвавшим событие.

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