Ajax 调用后执行不显眼的 Javascript答案

【问题标题】：Execute unobtrusive Javascript after Ajax callAjax 调用后执行不显眼的 Javascript
【发布时间】：2012-05-08 09:35:16
【问题描述】：

我想使用John Resig's pretty date 来用一些易于阅读的时间规范替换我丑陋的时间戳。所以我考虑使用以下不显眼的 html 标记：

 <span data-type="prettyDate">25.04.2012 10:16:37</span>

据我所知，我使用以下 Javascript/jQuery 来美化日期：

 $(function() {
    $('[data-type="prettyDate"]').prettyDate();
 }

我的问题是我不知道如何处理使用 ajax 加载的标记，因为当 DOM 就绪事件触发时它还不存在，所以不会被捕获。使用on handler 对“ajaxed”元素上的事件做出反应非常容易。但这不是一个事件。

【问题讨论】：

为了做这种事情，我通常有一个“checkAll”方法，每次我加载一些东西时都会调用它（例如在 ajax 回调中）。
我的一位同事创建了一个名为 liveReady 的 jquery 插件，它结合了 $.read 和 $.live 的行为。这正是我想要的：startbigthinksmall.wordpress.com/2011/04/20/…

标签： javascript jquery unobtrusive-javascript

【解决方案1】：

您可以将此代码合并到您的 ajax 成功回调函数中。完成 ajax 并更新页面后，还可以运行代码来美化日期。

【讨论】：

【解决方案2】：

您可以在动态内容实际插入文档之前使用 jQuery 来定位动态内容，例如：

success: function(html) {
   var $html = $(html);
   $html.find('[data-type="prettyDate"]').prettyDate();
   $(somewhere in document).append($html);
}

【讨论】：

为每个 AJAX 调用编写这个可能会有点烦人。

【解决方案3】：

在将每个 Ajax 响应添加到 DOM 之后，您必须调用 .prettyDate()。一种简单的方法是使用ajaxComplete 设置全局complete 处理程序。

【讨论】：

我希望有一个副作用更少的更好解决方案，但我想使用全局 ajaxComplete 是最好的方法。
@Towa, ajaxComplete 是一个“全局”的 ajax 事件，它被广播到 DOM 中的所有元素。所以你可以用.bind 或.on 将它绑定到一些高级元素（如document），只绑定一次。见docs。

【解决方案4】：

这是.on() is for 中的一件事。（在过去，.live() would have been used。）

【讨论】：

怎么样？你会在什么事件上绑定这个？
@dystroy 我会从 Ajax 成功中触发一个自定义事件，但这是否有意义取决于应用程序的上下文。（我倾向于行为抽象，因此依赖于某种 pub/sub 模型，但这取决于应用程序的复杂性。仅在 success 回调中执行此操作显然更容易、更直接。）

【解决方案5】：

为了获得最佳性能，您想要做的是有一个函数，当它从 ajax 回调返回时，它会在数据上被调用。这样你就可以在将它们添加到 DOM 之前美化你的日期。

您不想每次都在 DOM 中的元素上调用漂亮的日期，因为您也会处理已经完成的日期。

所以，像这样。

$.ajax({
  url:'someurl',
  success: function(data) {
    var $content = $(data).find('[data-type="prettyDate"]').prettyDate();
    $('#mycontainer').append($content);
  }
});

或者有一个你调用的辅助函数

function prettify(data) {
    return $(data).find('[data-type="prettyDate"]').prettyDate();
}

甚至更好地挂钩到 ajax 调用，以便为所有 html 内容完成

【讨论】：

【解决方案6】：

在很多情况下，我需要在每次 AJAX 调用后执行某些代码。我不确定它是否被认为是“正确”的解决方案，但我只是决定创建自己的包装方法并在需要发出 AJAX 请求时使用它。它通常看起来像这样：

AJAXLoadData: function (url, data, successCallBack) {
    $.ajax({
        type: "GET",
        data: data,
        url: url,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            // Code I want to execute with every AJAX call
            // goes here.

            // Then trigger the callback function.
            if (successCallBack) successCallBack(msg);
        },
        error: function (msg) {
            alert("Server error.");
        }
    });
}

在我的例子中，这使得为静态 HTML 文件创建 javascript 缓存系统变得特别方便。

【讨论】：

事件更适合这个，尤其是api.jquery.com/category/ajax/global-ajax-event-handlers
在某些情况下这可能是正确的，但您可能需要一种允许您在特殊情况下绕过附加函数调用的技术。我的解决方案很容易做到这一点，因为没有什么能阻止你直接调用 jQuery 的 $.ajax 方法。