CODEWITHSUNDEEP
javascriptjqueryajaxload
nobrandheroes
nobrandheroes

Reputation: 758

Pages loaded with jQuery .load() don't respond to other JavaScript

I have same pages loaded dynamically into a div using .load(). To divs from each page are loaded into two panes on a main page. It works. What I'm trying to do is to have JavaScript work on links contained in the subpages. The subpages just have a list on them.

The links have to be relative to root, but linking JS files the same way doesn't work. No matter where I say the .js file is located, nothing happens. Just the initial .load() function.

Is there something I add to code, or a way to find out where it is looking for .js files?

This is the function with .load()

$(document).ready(function() {
    //#left and #right are divs loading content from .content/.description
    $('#left').load('demos/websites.html .content');
    $('#right').load('demos/websites.html .description');
    $('nav#subnav li a').click(function() {
        var page = $(this).attr('href');
        $('#left').load(page + ' .content');
        $('#right').load(page + ' .description');
        return false;
    });
});

Upvotes: 0

Views: 381

Answers (4)

Ankit
Ankit

Reputation: 1887

Here's the full code of yours with suggestion from Alexander implemented. 

 $(document).ready(function() {
  //#left and #right are divs loading content from .content/.description
  $('#left').load('demos/websites.html .content');
  $('#right').load('demos/websites.html .description');

  $(document).on('click', 'nav#subnav li a', function() {
    var page = $(this).attr('href');

    $('#left').load(page+' .content');
    $('#right').load(page+' .description');
    return false;

  });
});

but ensure you are using jquery 1.7 or above.

Reason why you code is not working - When the statement where you are binding the click handler to links, possibly links may not be loaded at that time in the DOM itself.

Upvotes: -1

ebram khalil
ebram khalil

Reputation: 8321

when you are using .load function with suffixed selector expression the .js files that are contained in the page you are trying to load are not executed as if they are not included at all.

So then you have 2 options:

  1. Use .load function without suffixed selector expression

  2. Or include the .js files in the mail page then execute the required function after loading the content like this

    $('#left').load('demos/websites.html .content',function() { //execute here your js functions. });

From jQuery website :

Script Execution

When calling .load() using a URL without a suffixed selector expression, the content is passed to .html() prior to scripts being removed. This executes the script blocks before they are discarded. If .load() is called with a selector expression appended to the URL, however, the scripts are stripped out prior to the DOM being updated, and thus are not executed. An example of both cases can be seen below:

Here, any JavaScript loaded into #a as a part of the document will successfully execute.

1. $('#a').load('article.html');

However, in the following case, script blocks in the document being loaded into #b are stripped out and not executed:

1. $('#b').load('article.html #target');

Upvotes: 0

Alexander
Alexander

Reputation: 23537

You are better off using event delegation. Since the .load() calls are asynchronous they return immediately while the response hasn't been received and the .click() binding only considers the existent elements in the DOM at the moment of execution.

$(document).on('click', 'nav#subnav li a', function() {
  ...
});

As of jQuery 1.7, .on() is the recommended way for doing this.

Upvotes: 3

ZKK
ZKK

Reputation: 531

Looks like a timing issue. Use the callback function of load to register the click event.

 $('#left').load('demos/websites.html .content',function() {
       console.log('Left pane loaded');
  });

Upvotes: 1

Related Questions