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

首先这是，y建议使用

$(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
网址页面标记 ：

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