Question

我现在已经摆弄了几个小时，我无法弄清楚为什么会这样。

我编写了一个jquery导航脚本，用于替换名为＆＃34; contentwrapper＆＃34;的div中的内容。内容应该隐藏，加载动画显示然后消失，新内容淡入。问题是动画不会每隔一段时间发生。第一次单击时，它可以工作，但第二次单击时页面会刷新。这个循环继续。尽管使用了.on()，但好像点击功能仍未激活。这是我的代码：

$(window).ready(function(){

    $('.menu_top').on('click', function(e) {
    $("#loading").show();
    var href = $(this).attr('href');
    history.pushState({}, '', href);
    $('#contentwrapper').fadeOut('normal').hide().load(href + "#contentwrapper >  *").fadeIn('slow');

return false
});
    $(document).ajaxSuccess(function() {
    $("#loading").fadeOut();
});
});

这是in action

我尝试将所有我能在网上找到的东西都用到了，但无济于事。

Answer 1

我想我知道为什么会这样。

在您的点击处理程序中，您的最终陈述是：

return false

表示您希望点击事件被取消＆＃39;在运行代码之后（AJAX将内容加载到页面中）。

问题在于它实际上无法阻止点击事件被取消＆＃39;。查看浏览器中的URL /地址栏：当您单击标题项时，您将看到URL更改。您的浏览器每次都在重新加载页面。有时您会看到动画，因为AJAX请求在浏览器加载页面之前完成。

为了解决这个问题，我建议你将标题元素设置为锚点以外的其他元素（＆lt; a＆gt;）。使它们成为内联段落块（＆lt; p＆gt;）或其他东西。 jQuery可以检测任何元素的点击，这样你的代码就可以工作。

最后，如果您执行上述操作，但仍希望支持禁用JavaScript的浏览器，则可以使用＆lt; noscript＆gt;阻止将使用旧学校锚（具有href属性和所有内容）为这些人。这是可选的，仅当您需要支持没有Javascript（少数人）的用户时。

Ajax加载点击功能只能工作一次

1 个答案: