A friend and I are looking over a website involving a button that makes an AJAX call that upon successful return, loads HTML into a specified DIV tag and calls a Javascript function. The problem is that it will only work twice. After clicking it twice it fails to work properly. We are trying to dynamically control what the ready() invoked function is.
here is a simple case:
<html>
<head>
<script type="text/javascript" src="jquery-1.4.1.js"> </script>
<script type="text/javascript">
$(function(){
$("#trigger").click(
function(){
$("#target").load('load.html');
}
);
});
</script>
</head>
<body>
<div id="target" style='width:200px;height:200px;border: 1px solid black'>
Not Loaded
</div>
<input type="button" value="Load AJAX" id="trigger" />
</body>
</html>
load.html contains:
<script type="text/javascript">
$(function(){
alert('loaded stuff');
});
</script>
loaded
Here is the sample: http://phoenixillusion.net/demos/ajax/
Thanks!
EDIT Forgot to put information about the contents of load.html
You should upgrade to jQuery 1.4.2 which included a pretty heavy re-write of the events module, you can find full release notes here.