I'm using the following jQuery to pull new data and replace the contents of the DIV listdata
$(function(){
$('.refresh').click(function(event) {
event.preventDefault();
$.ajax({
url: "_js/data.php",
success: function(results){
$('#listdata').replaceWith(results);
}
});
});
});
The script is triggered by numerous links on the page, such as:
<a href="" id="update1" class="refresh">Update 1</a>
<a href="" id="update2" class="refresh">Update 2</a>
For some reason the script only works on the first click of a link. Subsequent clicks do not refresh the data.
I've seen various fixes but nothing that I can get working. Any suggestions?
It looks to me like your problem is with using replaceWith
.
You're removing the element which matches $('#listdata')
on the first call of replaceWith
, so subsequent refreshes can't find where the data is supposed to be placed in the document.
You could try something like
$('#listdata').empty();
$('#listdata').append(results);
or chained like this
$('#listdata').empty().append(results);