jQuery function load reloads the whole page

Question

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!

You have to delegate click event to containerWrapper level – A. Wolff Dec 28 '14 at 11:37 — A. Wolff, Dec 28 '14 at 11:37

score 2 · Accepted Answer · edited Oct 07 '16 at 10:21

2

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");
    });
});

edited Oct 07 '16 at 10:21

iWillGetBetter

780
1
15
35

answered Dec 28 '14 at 12:12

A. Wolff

74,033
9
94
155

1

Thank you for that it works, any specific reason why it reloaded on the second click? Because the loss of the bound? – Aldhyr Dec 28 '14 at 14:14

score -1 · Answer 2 · answered Dec 28 '14 at 11:30

first of all this is ,y advice to use

$(window).bind("load", function() {
//your codes here
});

instead of $(document).ready()
I've used some codes exactly like yours and it works great. but just one difference!

$(".remove").on('click', function(event){
    var url = $(this).attr('href') ;
   $('#containerWrapper').load(url + " #inner");
 event.preventDefault();
});

I've put prevent in the end! and I've load the #inner inside the #containerWrapper
url page markup :

<div id="containerWrapper">
   <div id="inner">
   </div>
</div>

jQuery function load reloads the whole page

2 Answers2