0

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

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

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

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

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

4

6 回答 6

3

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

于 2012-04-27T16:04:29.230 回答
1

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

success: function(html) {
   var $html = $(html);
   $html.find('[data-type="prettyDate"]').prettyDate();
   $(somewhere in document).append($html);
}
于 2012-04-27T16:04:17.663 回答
1

为了获得最佳性能，您想要做的是拥有一个函数，该函数在数据从 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 内容完成

于 2012-04-27T16:07:18.893 回答
1

在许多情况下，我需要在每次 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 缓存系统变得特别方便。

于 2012-04-27T16:10:47.557 回答
0

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

于 2012-04-27T16:03:35.037 回答
0

这是其中的一.on()件事。（在过去，.live()会被使用。）

于 2012-04-27T16:05:29.000 回答