Search code examples
jqueryfunctionloadreloading

jQuery function load reloads the whole page

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!

Solution

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