CODEWITHSUNDEEP
jqueryfunctionloadreloading
Aldhyr
Aldhyr

Reputation: 43

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!

Upvotes: 4

Views: 1541

Answers (2)

A. Wolff
A. Wolff

Reputation: 74420

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

Upvotes: 2

Ammargraph
Ammargraph

Reputation: 226

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>

Upvotes: -1

Related Questions