How to use .load() in javascript?

Question

I have some javascript on my main page. Later on, I load more content on user action through javascript using:

$("#div1").load(url+' #container');

My problem: I would like the javascript on the main page to apply to what is loaded now into div1. However, this doesn't happen because (I believe) only the contents in #container from 'url' are taken and therefore the javascript doesn't apply to these contents.

How do I fix this?

An example is at http://agile-thicket-6078.herokuapp.com/readers/highlight/1# after you click on the highlighted 'assembled' on the left pane and then click 'Like' on the right pane.

@adeneo I'm not sure what you mean. Can you provide more detail please? — sharataka, May 07 '13 at 15:42
In case you forgot how to Google things: https://www.google.com/search?q=Delegated+event+handlers+&ie=utf-8&oe=utf-8&aq=t — David Starkey, May 07 '13 at 15:45
In the example you have given, ´.load´ is a method of jQuery, not javascript, so you should refer to their documentation: http://api.jquery.com/load/ — Xotic750, May 07 '13 at 15:46
Not quite following your question? Do you have actions (such as `click`, `focus`, etc) whose actions aren't being called once you append new content? What **javascript** do you want to apply to what is loaded in ***div1***? — War10ck, May 07 '13 at 15:46
what the hell is #container?? hashtags have no meaning in http requests — David Fregoli, May 07 '13 at 15:53
@DavidFregoli The hash tag is not for the HTTP request. It's for fetching a page fragment. It is detailed clearly [here](http://api.jquery.com/load/#loading-page-fragments) in the ***jQuery API Docs***... — War10ck, May 07 '13 at 15:56

fardjad · Accepted Answer · 2013-05-07T15:51:19.967

0

You can wrap the code you want to execute after loading contents to that div to a function:

function doSomething() {
    //
}

and do:

$("#div1").load(url, function () {
    doSomething();
});

Note that you don't need to bind event handlers bounded with .on("SELECTOR") again as JQuery do this automatically for dynamically added elements.

edited May 07 '13 at 15:51

answered May 07 '13 at 15:45

fardjad

20,031
6
53
68

score -1 · Answer 2 · answered May 07 '13 at 15:48

-1

** to apply to what is loaded now into div1 **

in main page write event like that

 $(document).on('click', '.liking', function (e) {
    //your function here
 });

 -- insteadof
  $('.liking').click(function (e) { });

answered May 07 '13 at 15:48

Ahmed Alnahas

263
1
4

How to use .load() in javascript?

2 Answers2