I'm trying to refresh part of my php page without reloading the whole page using function load(). This question has been asked before and i've tried all the solutions I found.
It works well the first time I click on my <a class="remove" href="...>
but it reloads the entire page on the second click and so on...
It is my first post here but I hope my explanations were clear. Here's the js:
$( document ).ready(function() {
$(".remove").on('click', function(event){
var url = $(this).attr('href') ;
event.preventDefault();
$('#containerWrapper').load(url + " #containerWrapper");
});
});
Thank you in advance!
Your code will reload the entire page, because the .remove
element is a child of #containerWrapper
. You need to delegate the event to this level, otherwise all bound events will be lost:
$(document).ready(function () {
$('#containerWrapper').on('click', ".remove", function (event) {
var url = this.href;
event.preventDefault();
$('#containerWrapper').load(url + " #containerWrapper");
});
});