jQuery的$ GET/$阿賈克斯不能在所有瀏覽器中工作

Question

我有一個像下面的代碼：

$('a.load-more').on("click",function(){ 
    $.get($('a.load-more').attr('href'), function(data) { 
    $(".next-page").remove(); 
    $('.block-grid').append(data); 
    event.preventDefault(); 
}); 

的HTML：

<li class="next-page"> 
<a href="http://example.com/ajax_all/" class="load-more">Load More →</a> 
</li> 

正如你可以看到，採用了ajax內容的URL從.load-more元素傳遞給$ get方法，然後將該內容拉入內容並將其附加到當前頁面中。

但奇怪的是，這是在Chrome中工作，但不是Firefox或Safari，並且在這些瀏覽器的檢查器中沒有js錯誤。

而不是使用ajax拉內容，它只是去url http://example.com/ajax_all/並顯示內容。

我很難說爲什麼它可以在Chrome瀏覽器中運行，而不是Safari或Firefox。

Answer 1

你的腳本是無效的，或貼錯

$('a.load-more').on("click", function() { 
    $.get($('a.load-more').attr('href'), function (data) { 
     $(".next-page").remove(); 
     $('.block-grid').append(data); 
     event.preventDefault(); 

}); 

固定之後，它顯示了你的event.preventDefault();是get()這是異步的內部發生。

$('a.load-more').on("click", function() { 
    $.get($('a.load-more').attr('href'), function (data) { 
     $(".next-page").remove(); 
     $('.block-grid').append(data); 
     event.preventDefault(); 
    }); 
}); 

將preventDefault放在回調之外應該可以解決您的問題。

$('a.load-more').on("click", function (e) { 
    $.get($('a.load-more').attr('href'), function (data) { 
     $(".next-page").remove(); 
     $('.block-grid').append(data); 

    }); 
    e.preventDefault(); 
}); 

Answer 2

您的問題是單詞事件，它必須在單擊回調參數中。

試一下：

$('a.load-more').on("click", function(e){ 
    e.preventDefault(); 
    $.get($('a.load-more').attr('href'), function(data) { 
     $(".next-page").remove(); 
     $('.block-grid').append(data); 
    }); 
});