[jQuery] Handling events on remotely loaded html code
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?
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
</div>
<a class="actions" href="javascript:show_box('xxx');">Show</a>
</body>
</html>