Jquery $ get / $ ajax在所有浏览器中都不起作用

时间:2012-12-21 15:07:54

标签: jquery ajax cross-browser

我的代码如下:

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

如您所见,从.load-more元素中获取ajax内容的url,将其传递给$ get方法,然后将其拉入内容并将其附加到当前页面。

奇怪的是,这可以在Chrome中使用,但不适用于Firefox或Safari,并且检查员在这些浏览器中没有js错误。

不是使用ajax拉取内容,而是转到网址http://example.com/ajax_all/并显示其内容。

我很难理解为什么它可以在Chrome中运行,而不是Safari或Firefox。

2 个答案:

答案 0 :(得分:5)

您的脚本无效或粘贴错误

$('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();
});

答案 1 :(得分:3)

你的问题是单词event,它必须是click clickback的参数。

试试:

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