0

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?

melmar12
  • 35
  • 7
  • 1
    *"but once I start clicking on the links the javascript doesn't fire anymore"* Which links? Which JavaScript? What you posted? – Felix Kling Sep 07 '15 at 05:42
  • Links I made in my navigation that add new html on click – melmar12 Sep 07 '15 at 05:45
  • 2
    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 Sep 07 '15 at 05: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 Sep 07 '15 at 05: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?](http://stackoverflow.com/questions/9814298/does-jquery-on-work-for-elements-that-are-added-after-the-event-handler-is-cre/9814409?s=3|0.0000#9814409) and [jQuery .live() vs .on() method for adding a click event after loading dynamic html](http://stackoverflow.com/questions/8752321/jquery-live-vs-on-method-for-adding-a-click-event-after-loading-dynamic-ht/8752376#8752376) – jfriend00 Sep 07 '15 at 06:01
  • if my links are in my index.html file they're not loading dynamically right? – melmar12 Sep 07 '15 at 06:28

2 Answers2

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.

Justinas
  • 41,402
  • 5
  • 66
  • 96
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.

Nicolae Olariu
  • 2,487
  • 2
  • 18
  • 30
  • 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 – melmar12 Sep 07 '15 at 06:10