I've been using jQuery .load() to load content into a div. The content being .loaded occasionally has a document.ready() function which is called, and works, correctly (i.e. the ready() function is called). However, when I use an element ID in the .load(), such as: .load ("test.php #content"), the Javascript is no longer executed even if I put the script tag inside of the element that is being loaded. Does anyone have a solution to this other than to not use the element ID in the .load()? Thanks in advance.
Here is the dynamic content (loadDialogTest.php):
<div id="test">
<div>
Hello, World!
</div>
<script type="text/javascript">
$(document).ready (function () {
alert ("ready");
});
</script>
</div>
and here is the page (where the element ID is NOT specified) that loads it (shortened as much as possible while maintaining the form:
<head>
<script type="text/javascript">
$(document).ready (function () {
$("#openDialog").click (function () {
$("<div></div>")
.load ("loadDialogTest.php")
.appendTo ($("#containingDiv"))
.dialog ({
autoOpen: 'false',
title: 'Test This!',
close: function () {
$(this).dialog ('destroy').remove ();
}
});
});
});
</script>
</head>
<body>
<a href="#" id="openDialog">Open it</a>
<div id="containingDiv">
</div>
</body>
If I put #test after the .php file as the div to load, the jQuery ready() function is no longer called.