Issues with loading HTML/jQuery via Ajax

Question

Here are some simple HTML lines which I have in the body of my site:

HTML

<h1 class="trigger">
    First Headline
</h1>
<div class="toggle_container">
    Some Lorem Ipsum here
</div>

Then I have this jQuery in my header

jQuery

$(document).ready( function() {
    $('.trigger').not('.trigger_active').next('.toggle_container').hide();
    $('.trigger').click( function() {
        var trig = $(this);
        if ( trig.hasClass('trigger_active') ) {
            trig.next('.toggle_container').slideToggle('slow');
            trig.removeClass('trigger_active');
        } else {
            $('.trigger_active').next('.toggle_container').slideToggle('slow');
            $('.trigger_active').removeClass('trigger_active');
            trig.next('.toggle_container').slideToggle('slow');
            trig.addClass('trigger_active');
        };
        return false;
    });
});

After the site is loaded, the HTML changes to this and clicking the headline toggles the 'Lorem ipsum' container. So far, everything works fine.

HTML

<h1 class="trigger">
     First Headline
</h1>
<div class="toggle_container" style="display: none;">
     Some Lorem Ipsum here
</div>

Now here comes my problem: There's a 'Load more posts' button at the bottom of the site which adds a new HTML block with AJAX.

This HTML block appears properly, but it is somehow being ignored by the above jQuery.

What am I doing wrong here? Do I have to add the jQuery additionally to the AJAX? If so, where exactly?

Here is the AJAX code. Comments were made by the script's author, not me.

Ajax/jQuery

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

    // The number of the next page to load (/page/x/).
    var pageNum = parseInt(pbd_alp.startPage) + 1;

    // The maximum number of pages the current query can return.
    var max = parseInt(pbd_alp.maxPages);

    // The link of the next page of posts.
    var nextLink = pbd_alp.nextLink;

    /**
     * Replace the traditional navigation with our own,
     * but only if there is at least one page of new posts to load.
     */
    if(pageNum <= max) {
        // Insert the "More Posts" link.
        $('#content')
            .append('<div class="pbd-alp-placeholder-'+ pageNum +'"></div>')
            .append('<p id="pbd-alp-load-posts"><a href="#">↓ Archive</a></p>');

        // Remove the traditional navigation.
        $('.navigation').remove();
    }


    /**
     * Load new posts when the link is clicked.
     */
    $('#pbd-alp-load-posts a').click(function() {



        // Are there more posts to load?
        if(pageNum <= max) {

            // Show that we're working.
            $(this).text('...');

            $('.pbd-alp-placeholder-'+ pageNum).load(nextLink + ' .post',
                function() {
                    // Update page number and nextLink.
                    pageNum++;
                    nextLink = nextLink.replace(/\/page\/[0-9]?/, '/page/'+ pageNum);

                    // Add a new placeholder, for when user clicks again.
                    $('#pbd-alp-load-posts')
                        .before('<div class="pbd-alp-placeholder-'+ pageNum +'"></div>')

                    // Update the button message.
                    if(pageNum <= max) {
                        $('#pbd-alp-load-posts a').text('Older entries');
                    } else {
                        $('#pbd-alp-load-posts a').text('All items loaded.');
                    }
                }
            );
        } else {
            $('#pbd-alp-load-posts a').append('.');
        }   

        return false;
    });
});

P.S.: Since I'm an absolute beginner to all this, it'd be really helpful if you could post some working lines of code instead of directing me to this or that function. Thank you. :D

Answer 1

The issue that I see is with the binding the event. The way you are binding it, it only binds to the elements that are currently available in the markup.

New elements added by getting html through ajax won't be added to the event handlers. For that you need to modify the event binding statement to delegated binding:

$(document).on('click', '.trigger', function() {

});