CODEWITHSUNDEEP
jqueryhtml
jtlindsey
jtlindsey

Reputation: 4863

Access html elements from page loaded with jQuery .load()

I have a page with a div tag that I load different views into using jQuery .load()

<div class="main-content">
  <div id="load"></div>
</div>

When I load different views like the following, I can't access any of the elements from settings.html

$("#settings").click(function(){
    $("#load").load("main/settings.html");

    //not working
    $("#test1").click(function(){
       alert('hello');
    });
});

According to the second answer in this post:

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call...

So I moved my .click() code to the page that was being loaded (settings.html in this case) and I can access the elements from settings.html. Or I can do the suggested similar code posted

$("#settings").click(function(){
    $("#load").load("main/settings.html", function(){
        $("#test1").click(function(){
           alert('hello');
        });

    });
});

//or
$("#settings").click(function(){
    $("#load").load("main/settings.html");

    $(document).on("click","#test1",function(event){
           alert('hello');
    });
});

But I'd like to know how to bind all the elements assuming I don't know which ones ahead of time. In the above examples I know I need to bind #test1 id. But if I have a file like play.js where I'm changing different things on a loaded page, the methods listed above will require that I separate my code from play.js and put each piece in a function tied to the load event. I have lots of .load() events and wanted to keep my js like .click() etc in a separate file.

How do I bind all elements that are loaded without specifying them ahead of time? Or how do I tell jQuery to perform something like:

$("#settings").click(function(){
    $("#load").load("main/settings.html", function(){

        // pseudo code
        (function(){
           bind all elements from main/settings.html to DOM
        });

    });
});

So the scripts listed after it like this can access thoese elements.

<script src="../js/play.js"></script>

Upvotes: 3

Views: 3316

Answers (3)

Jed Fox
Jed Fox

Reputation: 3025

Here’s what I would do:

In your HTML page, load in some <script>s like this:

function loadSettings() {
  $('#test1').click(function() {
    alert('Hello, world!');
  });
  // other event handlers...
}

You can make as many of these as you want.

Then:

$("#settings").click(function(){
    $("#load").load("main/settings.html", loadSettings);
});

This will load the settings.html page into the view, then call loadSettings(), which will set up your event handlers.

Upvotes: 0

rvighne
rvighne

Reputation: 21907

The other answers here are good solutions, however I would like to explain the actual reason this is occurring: load is an asynchronous function, meaning that instead of doing some work and returning when it is done, it schedules the work to be done and then returns immediately.

In this case, calling load means that eventually the content of main/settings.html will be obtained and placed in #load, however not by the time the lines of code immediately after it have run. Thus, your inability to select the not-yet-created elements.

To manage this style of programming, such functions often accept a callback as an argument, which is another function (provided by you, the user) which will be called by the API later when the operation has finished. In this instance, it's the second argument to load. Within this function, you can act on the result of the action.

Upvotes: 1

charsi
charsi

Reputation: 3887

Bind the content from the loaded page in the callback function of the first load. 

$("#settings").click(function(){
    $("#load").load("main/settings.html", function(){
        $("#test1").click(function(){
           alert('hello');
        });

    });
});

Upvotes: 0

Related Questions