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

Ah, okay.. Thank you very much, but I don't get what this delegation stuff is all about. Any smarter/easier solutions? Would be very helpful. — user3814159
– user3814159, Commented Jul 7, 2014 at 22:59
I'm not into programming and computers, guess that's my main problem. I read the article, it's like reading a chinese newspaper, guess I just need some time to understand what's it all about. :D — user3814159
– user3814159, Commented Jul 7, 2014 at 23:08

Phil · Accepted Answer · 2014-07-07 22:59:42Z

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() {

});

edited Jul 7, 2014 at 22:59

Phil

166k25 gold badges265 silver badges269 bronze badges

answered Jul 7, 2014 at 22:58

Jehanzeb.Malik

3,3904 gold badges29 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Phil Over a year ago

Using the term "live" is incorrect and makes too strong a reference to the now removed jQuery method. I edited your answer with the correct term (hope you don't mind)

user3814159 Over a year ago

Thanks, this seems to make sense. I will give it a try and check back tomorrow ...

Collectives™ on Stack Overflow

Issues with loading HTML/jQuery via Ajax

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related