jquery - jQuery load() 函数重新加载页面

Question

我有这个代码：

$("a.ajax").on('click', function() {
    ajax_link();
});

function ajax_link() {
   $('#ajax_load').remove(); // Remove js
   $('#section').html('<?php echo $this->ajax_loading; ?>');
   setInterval( function() {
       $('#section').load($(this).attr('href')+'&ajax=true'); 
       return false;
   }, 1000);
}

但是当我单击链接时，它会重新加载页面而不是加载内容。有谁知道为什么？

我添加了其余的代码以确保它不是那样的。

Answer 1

您需要防止锚点的默认行为导致页面重新加载。您可以通过preventDefault()event 参数中可用的方法来做到这一点。

$("a.ajax").on('click', function(e){
       e.preventDefault();
      ajax_link.call(this);
});

另一个问题是，在 setInterval 回调内部this代表的是窗口而不是您单击的锚点，因此将this上下文缓存到变量并使用它。

function ajax_link(){
var self = this; //Cache it here
setInterval(function(){
    $('#section').load(self.href +'&ajax=true'); 
        return false; //You dont need this.
     },1000);
}

或者只是绑定它：

$("a.ajax").on('click', ajax_link);


function ajax_link(e){
var self = this; //Cache it here
e.preventDefault();
setTimeout(function(){ //Use setTimeout
    $('#section').load(self.href +'&ajax=true'); 
        return false; //You dont need this.
     },1000);
}

Answer 2

如果您使用的是最新版本的 jQuery，您可能会从 click 事件处理程序返回 false。返回 false 将 preventDefault() 和 stopPropagation()。StackOverflow 对此有参考... event.preventDefault() 与 return false

Answer 3

使用e.preventDefault()

事件的默认动作不会被触发。

$("a.ajax").on('click', function (e) {
    e.preventDefault();
    ajax_link();
});

或者你可以修改你的 HTML

<a class="ajax" href="javascript:void(0)">Load ajax</a>