I have a problem with jQuery in a page which contains few divisions.

Let us consider the following HTML code:

1. <div id="a"><a href="javascript:/" onclick="LoadB();return false;">Load B</a></div>
2. <div id="b"></div>
3. <div id="c">TEST</div>

where 

1. function LoadB( ) {
2. $( "#b" ).load( 'b.html' ) ;
3. }

and b.html contains

1. <a href="javascript:/" onclick="LoadC();return false;">Load C</a>

where 

1. function LoadC( ) {
2. $( "#c" ).load( 'c.html' ) ;
3. }

and c.html contains

1. <p>Hello, world!</p>

If I click on "Load B" it works but, as soon as the second link appears, if I click on "Load C", it does not. I get the following error:

Uncaught TypeError: Cannot read property 'body' of undefined

I suspect that in the second case there is some problem for jQuery to navigate the DOM.

Just consider that if I have check for division C after the first click, getElementById and jQuery give two different results. In fact

1. console.log(document.getElementById('c'));
2. console.log($( "#c" ));

result into

1. <div id="c">TEST</div> (from getElementById)
2. funzioni.js:68 (from jQuery)
3. w.fn.init [div#c]
4. 0: div#c
5. length:1
6. __proto__:Object(0)