jQuery Load content on click

Question

EDIT: Basically I want to know if there is away to hook the new content loaded from a jquery $('#mydiv').load(myurl) function to the current pages jQuery plugins etc

I have a webpage where a user clicks a link which then loads the URL content into a div on the current page.

jQuery click event

$(document).ready(function(){
$('.id_22').click(function(){
$('#message').load('my/url/page.html');
});
})

Current page div

<div id="message"></div>

my/url/page.html page content

<div id="message-nano-wrapper" class="nano">
<div class="nano-content">
<ul class="message-container">
<li>A message here</li>
</ul>
</div>
</div>

Problem is the current page has nanoScroller plugin initialized and working but it will not work inside the message div once the content is loaded.

I know that the other page has the nanoScroller class naming, but is there a way to have the current page "catch" the naming classes inside the my/url/page.html content to initialize the new content inside the nanoScroller?

I also know that i could just load the URL content inside of a nanoScroller div on the current page but im not wanting to achieve this because the my/url/page.html URL content will eventually have a few divs above the nanoScroll div

Answer 1

You probably just have to recall the listener once the content is loaded.

$(document).ready(function(){
    $('.id_22').click(function(){
        $('#message').load('my/url/page.html');
        $(".nano").nanoScroller();
    });
});