I am using JQuery (1.10.1) to run an AJAX call and insert content into a DIV. Any click on an li tag within the ajax DIV should trigger an alert as well as the AJAX method. The first time this is run it works, but subsequent calls fail and I do not get an alert.
I think that I should be binding the ajax DIV after a successful AJAX call but I am not sure. I have experimented with the .on method, and then .bind, but without detailed JQuery understanding, I can't go any further. There could be something far more basic that I have overlooked.
test1.php:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#ajax li').click(function() {
alert("Clicked");
$.ajax({
type: "post",
cache: false,
success: function(data){
$('#ajax').load("test2.php");
},
error:function(){
$("#ajax").html('Submission Error');
}
});
});
});
</script>
</head>
<body>
<div id='ajax'>
<ul>
<li>Example list item #1</li>
<li>Example list item #2</li>
<li>Example list item #3</li>
</ul>
</div><!-- Close ajax DIV -->
</body>
</html>
test2.php
<ul>
<li data-val='100009'>Red</li>
<li data-val='100008'>Blue</li>
<li data-val='100007'>Green</li>
</ul>
