jQuery无法使用无限滚动

时间:2016-05-13 21:35:29

标签: jquery ajax wordpress

我刚刚制作了一个新的wordpress主题,我使用以下脚本来获得类似手风琴的效果。

( function( $ ) {
    var $ele = $('.entry-content').hide(); 
    $(".entry-header").click(function(e) { 
        e.preventDefault();
        var $ele1 = $(this).parents(".post").children('.entry-content').slideToggle('fast');
        $ele.not($ele1).slideUp(); 
    });
} )( jQuery );

我刚刚启动了jetpack' s infinite scroll。 jquery脚本不适用于无限滚动添加的新加载内容。我的猜测是,无论何时通过无限滚动添加新内容,都必须重新加载或至少触发脚本。我这整天搜索了网络而没有找到任何解决方案。这里的任何帮助将不胜感激。

我已经在我的functions.php中将我的.js排入队列:

function journial() {
    wp_enqueue_script( 'journial', get_template_directory_uri() . '/js/journial.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'journial' );

1 个答案:

答案 0 :(得分:1)

您需要在追加帖子后触发事件。要使用此事件,只需在document.body:

上触发post-load事件

(function($){ //wait until dom has loaded 

  function initAccordion(){ // first, prepare your function 
    var $ele = $('.entry-content').hide();
    $(".entry-header").unbind('click').click(function(e) { // bind click event handler 
      e.preventDefault();
      var $ele1 = $(this).parents(".post").children('.entry-content').slideToggle('fast');
      $ele.not($ele1).slideUp();
    }); 
  } 

  initAccordion(); // second, run the function the first time page loads 
  
  $(document.body).on('post-load', function(){// third, setup event handeler 
  initAccordion(); //run the funtion again after new content is loaded 
  }); 

} )(jQuery);