hrefをロードするために、jqueryを介してajaxを呼び出しています。HTMLが正しく読み込まれているようです。ただし、ロードされたhtml(href)は実際には機能しません。具体的には、リンクがajaxを介して読み込まれると、クリックしても実際には何も実行されない理由がわかりません。ファイアバグにエラーはなく、リンク切れだけです。私の.on()メソッドは正しくありませんか?
home.html
<html>
<head></head>
<body>
<div id="connections">Placeholder Text</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var uri='home-ajax.html'; //first find out if this is created yet
var myVar=setInterval(function(){example_ajax_request()},8000); //to do that check for it ev. 8 sec.
function example_ajax_request() {
$.ajax({
type: 'GET',
url: 'home-ajax.html', //checking
dataType: 'html', //html is content inside home-ajax.html
success: function() {
$('#connections').load('home-ajax.html'); //if home-ajax exists replace connections div with its content
clearInterval(myVar); //stop the 8 sec. timer
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});
}
$('myLink').on('click', function(e) { //using .on to actively bind new href link from ajax()
document.location.href="http://www.cnn.com";//when href with id='myLink' is clicked, go to www.cnn.com
});
</script>
</body>
</html>
home-ajax.html
<p><a href="#" id="myLink">CNN</a></p>