Функция загрузки jQuery перезагружает всю страницу

Question

Я пытаюсь обновить часть моей php-страницы без перезагрузки всей страницы с помощью функции load(). Этот вопрос задавался ранее, и я попробовал все найденные решения.

Это работает хорошо, когда я в первый раз нажимаю на <a class="remove" href="...> но он перезагружает всю страницу по второму клику и так далее...

Это мой первый пост здесь, но я надеюсь, что мои объяснения были ясны. Вот JS:

$( document ).ready(function() {
$(".remove").on('click', function(event){
    var url = $(this).attr('href') ;
    event.preventDefault();

    $('#containerWrapper').load(url + " #containerWrapper");
});
});

Заранее спасибо!

Answer 1

Ваш код перезагрузит всю страницу, потому что .remove элемент является дочерним #containerWrapper, Вам необходимо делегировать событие этому уровню, иначе все связанные события будут потеряны:

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

Answer 2

Прежде всего, это, совет по использованию

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

вместо $(document).ready()
Я использовал некоторые коды точно так же, как ваш, и он прекрасно работает. но только одно отличие!

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

Я положил prevent в конце! и я загружаю #inner внутри #containerWrapper
URL разметки страницы:

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