jquery - jQuery 函数 load 重新加载整个页面

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最后了！我已经加载了 url 页面标记#inner内部：#containerWrapper

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