Wordpress pagination fade and continue reading toggle

Question

I want to load new content in a specific area of my website - works great. But after loading this all other jquery functionality isnt loaded. With the following code my "continue reading toggle" wants to do nothing. Is there a way to get around this?

/** =================================================================
* pagination fade
* ================================================================== */
$('#Pagination a').on('click', function(e){  

    var link = $(this).attr('href');  
    e.preventDefault();

    $('#inner').animate({opacity: 0.0}, 500, 'linear', function(){

        $(this).load(link + ' #postcontent', function() {
            $(this).animate({opacity: 1}, 500, 'linear');
        });
    });
});


/** =================================================================
continue reading toggle
================================================================== */

$('.continue-reading a').click(function(){
    $(this).closest('p').next('.continue-reading_content').slideToggle("slow");

}).toggle(function() {
        $(this).text(continueReading_close);

    }, function() {
        $(this).text(continueReading_open);
    });

Here is a start fiddle: http://jsfiddle.net/Ccj32/4/

---

Here is the final code

jQuery(document).ready(function($) {

/** =================================================================
* pagination fade
* http://stackoverflow.com/questions/15983244/simple-wordpress-ajax-pagination
* ================================================================== */

$(document).on('click', '#Pagination a', function(e){

    var link = $(this).attr('href');  
    e.preventDefault();

    $('#inner').animate({opacity: 0.0}, 500, 'linear', function(){

        $(this).load(link + ' #postcontent', function() {
            $(this).animate({opacity: 1}, 500, 'linear');
        });
    });
});


/** =================================================================
continue reading toggle
================================================================== */

$(document).on('click', '.continue-reading a', function(e){
    e.preventDefault();

    // old selectors
    //$(this).closest('p').next('.continue-reading_content').slideToggle("slow", function(){
    // $(this).closest('.entry-content').find('.continue-reading_content').slideToggle("slow", function(){

    // new selector to prevent if there is no <p> in content
    $(this).closest('.entry-content').children('.continue-reading_content').slideToggle("slow", function(){

        if ($('.continue-reading_content').is(':hidden'))
        {
            $('.continue-reading a').text(continueReading_open);    
        }
        else
        {
            $('.continue-reading a').text(continueReading_close);   
        }

    });

});
});

With event handlers set to the document, code works fine: http://jsfiddle.net/Ccj32/7/

Answer 1

Any content that is loaded into the page after the initial page load must have the event handlers set to the document like this:

$(document).on('click', '.continue-reading a', function(){

Hope that helps!