how to load html from server and use jquery selectors

Question

I have a div on .aspx page:

<div id="container"></div>

and I am loading some html from server using jQuery .load() method as below:

$(function() {
    $('#container').load('web/testpage');
});

where web/testpage is mvc partial view:

<div id='partialView'>
   blah blah
</div>

This loads correctly and I see the expected mark-up in the firebug

<div id="container">
   <div id='partialView'>
      blah blah
   </div>
</div>

but the problem is I am not able to select the inner div from jQuery

$(function() {
   console.log($('#partialView')); // this is empty
});

any idea where I am going wrong?

Answer 1

You have to wait until the div is loaded, you can use the callback from .load for this:

$('#container').load('web/testpage', function() {
    console.log($('#partialView'));
});