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()方法来完成。

$("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

使用e.preventDefault()

不会触发事件的默认操作。

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

或者您可以修改HTML

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

Answer 3

如果您使用的是最新版本的jQuery，则可能会从Click事件处理程序返回false。返回false将阻止默认（）和stopPropagation（）。 StackOverflow引用了这个... event.preventDefault() vs. return false

JQuery load（）函数重新加载页面

3 个答案: