javascript - 页面重新加载未触发文档就绪

标签 javascript jquery

以下 td 在第一页加载时由 JavaScript 更新,以产生以下结果(即一切正常)。 但是,当调用分页链接时,不会调用文档就绪,因此不会重写日期。 我尝试过各种方法,但没有成功。在页面重写时,属性会在服务器端更新。 没有 ajax 调用,分页链接只是一个简单的 url 重新加载同一页面,但查询路径已更改。我知道重新加载行为是正常的 - 我只是无法解决它。

有什么想法可以在后续加载时调用我的初始化调用吗?

<td class="date" data-time="1499543100110"></td>

$(document).ready(function () {
    initialise();
});

function initialise() {
    $(".date").each(function(){
        var millisec = parseInt($(this).attr("data-time"));
        var ts = moment(new Date(millisec)).format("MMMM Do YYYY, h:mm:ss a");
        $(this).text(ts);
    });
}

<a href="?page=6&amp;size=20&amp;criteria=" data-ajax-load="#ajaxload">7</a>

输出

<td class="date" data-time="1499543100110">July 8th 2017, 8:45:00 pm</td>

更新

正如下面所建议的,这个问题还有更多内容。分页链接被捕获,请求由 ajax 发出,绕过了所有正常的 js 钩子(Hook)。我删除了下面的捕获,一切都按预期进行。网络 URL 流量看起来像是直接的页面加载,但实际上是 ajax 调用。

$(document).on('click', 'a[data-ajax-load]', function(event) {
    var _url = $(event.target).attr('href');
    var _target = $(event.target).data('ajax-load');
    $(_target).load(_Url + ' ' + _target, 
        function(response, status, xhr) {
            // display errors etc
        }
    );
    return false;
});

下面的答案可能都是正确的,但不需要探索它们 - 感谢您的指导。

最佳答案

您可以尝试在正文标记上使用“onload”,如下所示:

<body onload="myFunction()">
  //Code
</body>

它的作用是等待标签,在本例中是 <body>标签,在执行函数之前完全加载(在本例中为 myFunction()。)

您编辑的代码应该如下所示或类似的内容:

<body onload="initialise()">
  <td class="date" data-time="1499543100110"></td>

  function initialise() {
    $(".date").each(function(){
      var millisec = parseInt($(this).attr("data-time"));
      var ts = moment(new Date(millisec)).format("MMMM Do YYYY, h:mm:ss 
    a");
      $(this).text(ts);
    });
  }

  <a href="?page=6&amp;size=20&amp;criteria=" data-ajax load="#ajaxload">7</a>
</body>

编辑:经过一些在线研究,我发现了这一点:

您也可以使用 JavaScript body.onload() 函数来激发类似的效果,如下所示:

body.onload(initialise);

我不是 jQuery 专家,但看看你的代码,我认为你也可以做到这一点,尽管我不确定:

$(body).onload(function () {
  initialise();
});

关于javascript - 页面重新加载未触发文档就绪,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44991306/

相关文章:

javascript - Pentaho/Kettle JavaScript : Calling a field dynamically

javascript - 需要澄清我正在编写的这段代码以查找数组的模式

javascript - 两个文本框,其中一个包含有限数量的字符,另一个文本框包含剩余的字符

jquery - 如何访问弹出定义中的调用对象?

php - 在浏览器上从网络摄像头捕获视频以将视频保存在我的服务器端

jquery - AddClass 上的 CSS3 动画不是页面加载

javascript - 将对象解构为函数参数深度扩展

javascript - JSP-html按钮启用-禁用条件

javascript - 如何在nvd3中显示所有x轴值

Jquery 淡入淡出渐变背景