how to fix javascript after ajax call? [duplicate]

Question

So the structure of my web page is split into three files. I have an index.html file with 3 divs; My navigation bar, a content box, and footer. Then I have two other .html files with different content that I want to load when clicking on links.

My Javascript looks like this:

$( ".content" ).load( "home.html" );

$( ".parents-link" ).click(function() {
  $( ".content" ).load( "parents.html" );
});

$( ".home-link" ).click(function() {
  $( ".content" ).load( "home.html" );
});

All files use some javascript and when I first open index.html everything works perfectly fine, but once I start clicking on the links the javascript doesn't fire anymore in the content div. My navigation bar in index.html uses javascript and still works regardless.

also, all my custom js is in one .js file for all three .html files. I'm also using some plugins.

How can I fix this issue?

"but once I start clicking on the links the javascript doesn't fire anymore" Which links? Which JavaScript? What you posted? — Felix Kling
– Felix Kling, Commented Sep 7, 2015 at 5:42
I guess you have a problem with new elements appended to DOM but that have no events attached. You should try to use event delegation on a parent container and bind click events on it. — Nicolae Olariu
– Nicolae Olariu, Commented Sep 7, 2015 at 5:47
Are you sure it is not working??? Maybe your content is populated, but instead of insertion, it appends, so basically when you click all links you end up with 3 pages inserted, but they are simply underneath — Medet Tleukabiluly
– Medet Tleukabiluly, Commented Sep 7, 2015 at 5:48
You will want to use delegated event handling. There are lots of other answers that describe how to do this: Does jQuery.on() work for elements that are added after the event handler is created? and jQuery .live() vs .on() method for adding a click event after loading dynamic html — jfriend00
– jfriend00, Commented Sep 7, 2015 at 6:01

Justinas · Accepted Answer · 2015-09-07 05:59:06Z

3

You are loading dynamic content on click. .click() works only for elements currently in DOM, not for future elements. You must use $(staticElement).on('click', 'dynamicElementSelector') for that:

$(document).on('click', ".parents-link", function() {
    $(".content" ).load("parents.html");
});

I suggest using dynamic structure:

<a href="parents.html" class="loading-link"></a>

$(document).on('click', '.loading-link', function (event) {
    event.preventDefault(); // Prevent browser from following link.
    $.load($(this).attr('href'));
});

There will be only one function for all links that must load some content.

edited Sep 7, 2015 at 5:59

answered Sep 7, 2015 at 5:49

Justinas

43.9k5 gold badges72 silver badges108 bronze badges

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

Comments

Nicolae Olariu · Accepted Answer · 2015-09-07 05:51:19Z

0

Let's try this:

$('html').on('click', '.parents-link', function() {
  $('.content').load('parents.html');
});

$('html').on('click', '.home-link', function() {
  $('.content').load('home.html');
});

And as I said in my first comment, we need to bind events to an upper parent and make use of event propagation.

answered Sep 7, 2015 at 5:51

Nicolae Olariu

2,5652 gold badges20 silver badges31 bronze badges

1 Comment

melmar12 Over a year ago

this didn't work when I put it directly on my page, but I'm trying to read up on this because I'm still not understanding this concept

Collectives™ on Stack Overflow

how to fix javascript after ajax call? [duplicate]

2 Answers 2

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Linked

Related