我有如下代码:
$('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 来提取内容,而是直接转到 url http://example.com/ajax_all/并显示其内容。
我很困惑为什么它可以在 Chrome 中运行,而不能在 Safari 或 Firefox 中运行。
最佳答案
您的脚本无效,或粘贴错误
$('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();
});
关于Jquery $get/$ajax 不适用于所有浏览器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13992472/