Loading jQuery function reloads the whole page
I am trying to refresh part of my php page without reloading the whole page using the load () function. This question has been asked before and I have tried all the solutions I found.
Works well the first time I click on <a class="remove" href="...>
, but reloads the whole page in the second click, etc.
This is my first post, but I hope my explanations are 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!
source to share
Your code will reload the whole page because the element .remove
is a child #containerWrapper
. You need to delegate the event to this level, otherwise all related events will be lost:
$(document).ready(function () {
$('#containerWrapper').on('click', ".remove", function (event) {
var url = this.href;
event.preventDefault();
$('#containerWrapper').load(url + " #containerWrapper");
});
});
source to share
first of all this, y advice to use
$(window).bind("load", function() {
//your codes here
});
instead $(document).ready()
I have used some codes just like yours and it works great. but only one difference!
$(".remove").on('click', function(event){
var url = $(this).attr('href') ;
$('#containerWrapper').load(url + " #inner");
event.preventDefault();
});
I put prevent
the end! and I loaded #inner
inside the #containerWrapper
url of the page:
<div id="containerWrapper">
<div id="inner">
</div>
</div>
source to share