the .A1 within the #info divs does not exist when the document ready event fires, so the click event is not applied. try using the live method()
http://docs.jquery.com/Events/live On Oct 5, 2:54 pm, GLSmyth <george.sm...@gmail.com> wrote: > I have some simple code: > > $(document).ready( > function() { > $('.A1').click( > function() { > $('#Info').load('Test_A1.htm'); > } > ); > $('.A2').click( > function() { > $('#Info').load('Test_A2.htm'); > } > ); > } > ); > > followed in the body with: > > <body> > <div class="A1">A1</div> > <div class="A2">A2</div> > <div id="Info" style="border:1px solid red;"></div> > </body> > > Test_A1.htm is simply the following: > > <div>This is A1</div> > <div class="A2">Click this text to display Test_A2.htm</div> > > 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
