jquery: load div from other pages into div

Question

I'd like to load divs that are saved as separate html files into a div of a "main file". This works fine. However, in the div that I am loading into the main file, I have some links again and when I click on those, I'd like those divs to be loaded into the div in the main file.

So the main file has a menu like this:

<ul id="menu_ul">
                <li class=" ui-widget-header">
                    <a class="clickable" href="output/d1e49.html">ONE</a>
                </li>
                <li class=" ui-widget-header">
                    <a class="clickable" href="output/d1e670.html">TWO</a>
                        </li>
</ul>

and a div like this:

<div id="target"></div>

The jquery looks like this:

                    $("a").click(function() {  return false;    }); 

                    $(".clickable").click(function() {   

                    var url = $(this).attr("href");     

                    $('#target').load(url) + " .content";

                    });

And the loaded pages look like this:

<div class="content">
                    <ul>
                        <li>
                            <a class="clickable" href="output/d1e100367.html">SUB_ONE</a>
                        </li>
                        <li>
                            <a class="clickable" href="output/d1e101804.html">SUB_TWO</a>
                        </li>
</ul>
</div>

So the pages ONE and TWO are loaded into the div. However, when I click on the links contained in those files, it doesnt work, the links for SUB_ONE and SUB_TWO replace the current page instead of being loaded into the div as well.

How would I get the links in the loaded pages to work? Is the DOM of the loaded divs not accessible to jquery?

Answer 1

This is wrong syntax $('#target').load(url) + " .content"; but i guess just typo in question. It must be: $('#target').load(url + " .content");

Now regarding your issue, you should delegate event:

$(document).on("click", ".clickable", function (e) {

  e.preventDefault();

  var url = $(this).attr("href");

  $('#target').load(url + " .content");

});