Javascript not executing after Ajax call

Question

I know this has been asked on SO a lot, but I have trawled through the posts for a few hours now and nothing works.

I'm working on a Wordpress blog where the prev/next buttons on a single post page have to load the prev/next post by Ajax. I have written the code (jQuery Ajax) all fine (I think - if you want to improve it, be my guest!), but in each post there a few bits of jQuery that need to work. However, after I click either of the prev/next buttons to move between posts, the jQuery won't work (it works absolutely perfectly when the page is first loaded). I know this is due to the content not being 'connected' to the JS anymore but I'm not sure what to do about it.

Here is my code:

$(".page-feed").on('click', '.post-nav>a', function() {
    event.preventDefault ? event.preventDefault() : event.returnValue = false;
    var link = $(this).attr('href'); // get the value of the href attribute on the links
    $(".post-content").html("Loading...");
    $.get(link, function(result) {
        $result = $(result);
        $content = $result.find(".post-content");
        $(".post-content").replaceWith($content);
    }, 'html');
});

I know that you're probably going to ask what I've already tried, but if I'm honest, not a lot that would be worth putting here.

The code above is located right at the top of a file called script.js, with all the other JS below it (which doesn't currently work after the Ajax call). The script is started by the standard $(document).ready(function() { statement.

Thanks for any help :)

user400654 · Accepted Answer · 2014-02-03 19:35:34Z

2

First, you need to accept the event object as an argument.

$(".page-feed").on('click', '.post-nav>a', function(event) {

Next, by using the jQuery event object, you can simplify the next line because event is normalized by jQuery to work cross-browser.

event.preventDefault();

Now, as far as it working on the first click but not after, that's likely because .page-feed is a dynamic element. You'll need to instead select an element that is an ancestor of .post-content. document is a decent replacement, but it would be better if you picked one more local.

$(document).on('click', '.post-nav>a', function(event) {

answered Feb 3, 2014 at 19:35

user400654

95.1k16 gold badges168 silver badges188 bronze badges

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

8 Comments

Tom Oakley Over a year ago

Thanks for the reply and advice about event.PreventDefault() :) I was using document as the replacement, but switched to .page-feed as it's more specific and I read that it may help (obviously it didn't). .page-feed is an ancestor of .page-content, but not directly (there a couple more divs to get through first). I also think I should clarify what my problem is: when I load the page, the JS works fine and I click the next button and it goes to the next post. The JS on this post doesn't work, however, the pref/next buttons still work. Thanks for any further help :)

user400654 Over a year ago

So what you're saying is the code you posted continues to work, but code that is loaded by the ajax doesn't. correct? Loading additional code that way is already dangerous due to the fact that it is being executed out of context. It's likely that the additional code is getting executed before the elements get appended to the page, resulting in the javascript not finding the correct elements. (or, you might not be executing the javascript at all depending on where it is located in result)

user400654 Over a year ago

You could try replacing all script tags with divs using regexp before you parse the content to a javascript object, but it's very error prone.

user400654 Over a year ago

An example of that can be found here: github.com/browserstate/ajaxify/blob/master/…

Tom Oakley Over a year ago

ok, thanks I'll give this a try tomorrow, thanks for help Kevin :)

|

Collectives™ on Stack Overflow

Javascript not executing after Ajax call

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related