Ajax 调用后 Javascript 未执行

Question

我知道这个问题已经被问了很多，但我已经浏览了几个小时的帖子，但没有任何效果。

我正在开发一个 Wordpress 博客，其中单个帖子页面上的上一个/下一个按钮必须加载 Ajax 的上一个/下一个帖子。我已经编写了代码（jQuery Ajax），一切都很好（我认为 - 如果你想改进它，请做我的客人！），但在每篇文章中都有一些需要工作的 jQuery。但是，在我单击任何一个上一个/下一个按钮在帖子之间移动后，jQuery 将无法工作（当页面首次加载时它绝对完美地工作）。我知道这是因为内容不再“连接”到 JS，但我不知道该怎么办。

这是我的代码：

$(".page-feed").on('click', '.post-nav>a', function() {
    event.preventDefault ? event.preventDefault() : event.returnValue = false;
    var link = $(this).attr('href'); // get the value of the href attribute on the links
    $(".post-content").html("Loading...");
    $.get(link, function(result) {
        $result = $(result);
        $content = $result.find(".post-content");
        $(".post-content").replaceWith($content);
    }, 'html');
});

我知道你可能会问我已经尝试过什么，但老实说，没有太多值得放在这里的东西。

上面的代码位于一个名为 script.js 的文件的顶部，所有其他 JS 在它下面（当前在 Ajax 调用之后不起作用）。该脚本由标准的$(document).ready(function() { 语句启动。

感谢您的帮助:)

Answer 1

首先，您需要接受事件对象作为参数。

$(".page-feed").on('click', '.post-nav>a', function(event) {

接下来，通过使用 jQuery 事件对象，您可以简化下一行，因为 event 已被 jQuery 规范化以跨浏览器工作。

event.preventDefault();

现在，就它在第一次点击而不是之后起作用而言，这可能是因为.page-feed 是一个动态元素。您需要选择一个作为.post-content 祖先的元素。 document 是一个不错的替代品，但如果你再选一个本地人会更好。

$(document).on('click', '.post-nav>a', function(event) {