I have some simple code: [code] $(document).ready( function() { $('.A1').click( function() { $('#Info').load('Test_A1.htm'); } ); $('.A2').click( function() { $('#Info').load('Test_A2.htm'); } ); } ); [/code] followed in the body with: [code] <body> <div class="A1">A1</div> <div class="A2">A2</div> <div id="Info" style="border:1px solid red;"></div> </body> [/code] Test_A1.htm is simply the following: [code] <div>This is A1</div> <div class="A2">Click this text to display Test_A2.htm</div> [/code] Test_A2.htm is the same as Test_A1.htm, only with the "1" and "2" values switched.
When I click on A1 or A2, the text from the associated files is loaded into #Info, so that works fine. However, when I click on the A1 or A2 class within #Info, nothing happens. I guess I am missing something fundamental here, so it would be very helpful if someone could explain how I can get the text that is displayed within #Info "clickable" so that it can load the other file. Thanks for your help. george