Hi guys, I have this code where it will dynamically load the html code coming from a remote url but when I created an event for this html code. Jquery doesn't recognize the elements coming from this html code. What should I do for jquery to execute the click event <p id="contents">Test</p>?
Thanks Here's the snippet ########################################################## Html source: <div id="show_box_container"> </div> <a href="javascript:show_box('xxx');" class="actions">Show</a> ########################################################## Javascript with jquery: function show_box(name) { $.ajax({ url: 'remote_test.html', timeout: 5000, success: function(html, textStatus, data){ $('div#show_box_container').append(html); }, async: false }); } $(document).ready(function(){ $("p#contents").click(function(){ alert("test"); }) }); ########################################################## HTML Source after loading page under firebug <html> <head> <script src="jquery-1.2.1.js" type="text/javascript"></script> <script type="text/javascript"> function show_box(name) { $.ajax({ url: 'remote_test.html', timeout: 5000, success: function(html, textStatus, data){ $('div#show_box_container').append(html); }, async: false }); } $(document).ready(function(){ $("p#contents").click(function(){ alert("test"); }) }); </script> </head> <body> <div id="show_box_container"> <p id="contents">Test</p> </div> <a class="actions" href="javascript:show_box('xxx');">Show</a> </body> </html>