jQueryが無限スクロールで動作しない

Question

新しい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の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'); 

Answer 1

あなたはポストが追加された後、イベントをトリガーする必要があります。それはdocument.bodyに発射したときに、このイベントを利用するには、単にポスト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);