Question

我有一个网站，我想在不重新加载页面的情况下更改页面，只需刷新内容。我正在使用express.js框架。这是更改页面的代码：

$("a").on('click', function(e) {
    pageUrl = $(this).attr('href');
    e.preventDefault();

    $.ajax({
        url: pageUrl, success: function(data) {
            $('#main-content').html(data);            
        }
    });
});

这是我用jade的“基本”布局：

doctype html
    html(lang="fr")
        head
            title test
            block head
        body
            #main-content
                block body

            script(src="/js/vendor/jquery.js")

如何使用express.js检测ajax调用，因此我只能加载“块体”而不是所有布局。

我认为会是这样的：

if !ajax
    doctype
    ...
    block body
else
    block body

谢谢。

Answer 1

由于您在单击a元素时向 DOM 添加新内容，因此单击处理程序不适用于新添加的a元素。

这不是关于 NodeJS ，而是 jQuery 代码。您应该在body或document上添加点击处理程序，因为在点击a元素时它不会更改。

$(document).on('click', "a", function(e) {
    pageUrl = $(this).attr('href');
    e.preventDefault();    
    $.ajax({
        url: pageUrl, success: function(data) {
            $('#main-content').html(data);            
        }
    });
});

有一个解决方案可以检查another SO answer上 Express.js 中的 AJAX 来电。

检测是否使用Node.js调用ajax（刷新页面而不重新加载）

1 个答案: