Jquery $ get/$ ajax nie działa we wszystkich przeglądarkach

Question

mam kod jak poniżej:

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

Które jak widać, bierze url ajax zawartości z elementu .load-more przekazuje go do metody $ get, która następnie pobiera zawartość i dołącza ją do bieżącej strony.

Dziwne jest jednak to, że działa w przeglądarce Chrome, ale nie w przeglądarce Firefox lub Safari i nie ma błędów js w inspektorach dla tych przeglądarek.

Zamiast ciągnąć zawartość za pomocą ajax, po prostu przechodzi do adresu URL http://example.com/ajax_all/ i wyświetla jej zawartość.

Zastanawia mnie, dlaczego działa w Chrome, a nie Safari czy Firefox.

Answer 1

Ty skrypt jest nieprawidłowy lub wklejone źle

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

}); 

Po ustaleniu, że to pokazuje, że event.preventDefault(); się dzieje wewnątrz get() który jest asynchroniczny.

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

Umieszczenie numeru preventDefault poza numerem wywołania zwrotnego powinno rozwiązać problem.

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

Twoim problemem jest słowo kluczowe, musi ono występować w parametrach wywołania zwrotnego kliknięcia.

Spróbuj tego:

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