[jQuery] [ $(document).ready ] it doesn't work with HTML loaded dynamically
Hello,
I prefer prevent you that I'm french. I post on this group cause
french groups cannot answer to this problem :
When I add dynamically HTML code in a page, Jquery doesn't take charge
of it.
I hope that this example will be more understandable :
3 files : index.html, event.js, content.html
----------------------------------------------------------------------------------------------------------------------------------------------------------------
index.html :
----------------------------------------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="event.js"></script>
</head>
<body>
<div id="b">
<h1><a href="#" id="b1">Test1</a></h1>
</div>
<div id="c"></div>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------------------------------------------------
event.js :
----------------------------------------------------------------------------------------------------------------------------------------------------------------
$(document).ready(function() {
// to load the content.html
$("a#b1").click( function() {
$("#c").load("content.html");
alert("test");
} );
// action on the loaded part
$("a#d").click( function() {
alert("test2");
} );
} );
----------------------------------------------------------------------------------------------------------------------------------------------------------------
content.html
----------------------------------------------------------------------------------------------------------------------------------------------------------------
<h1><a href="#" id="d">Test2</a></h1>
----------------------------------------------------------------------------------------------------------------------------------------------------------------
as you'll notice it, content.html is added, but document.ready doesn't
seem to see it, because the alert doesn't work !
If you have any idea...
Thanks