第一次加载 HTML 页面时 JS 未运行答案

【问题标题】：JS not running first time HTML page loads第一次加载 HTML 页面时 JS 未运行
【发布时间】：2014-10-07 17:06:49
【问题描述】：

第一次加载 HTML 页面时，javascript 函数不运行。但是，如果我刷新页面，脚本运行得很好。

说明：

我的索引页面有一个指向 showdata HTML 页面的按钮。问题是，当我单击索引页面中的按钮时，我可以（在 URL 中）看到 showdata.html 页面已加载但 JS 代码没有运行（因为我看不到任何警报）。

但是，如果我手动刷新页面或点击 URL，JS 运行良好，我可以看到警报语句。

在 Chrome 和 Firefox 上试过这个，两个地方的结果都一样。

如果我没记错的话，$(function() 是 $(document).ready 的简写。无论如何，我都尝试过使用这两种语法，但结果是一样的。

页面的当前代码是：

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>

<script type="text/javascript"> 
    $(function() { alert("hello"); });
</script>
</head>
  <body></body>
</html>

页面首次加载时，我无法看到预期的警报框。当我重新加载页面时，警报按预期出现。

更新：

我清除了缓存但没有结果。

另外，当我删除

<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>

来自 index page 的标签，其中存在指向我当前页面的链接，JS 在第一次加载 showdata.html 页面时正确触发。但是，这会导致索引页面中的样式丢失。

【问题讨论】：

我的建议是将它放在 JSFiddle 中以进行调试。所以即使你在get() 方法之外放了一个console.log，它也不会出现？
您的showdata.html 页面似乎有一些错误。能否请您也添加您的HTML。
是数据没有加载，还是 DOM 操作失败？进行更多调试以查明问题所在，并简化代码（您真的需要所有的 HTML 结构来说明问题吗？）
更新了我的代码的简化版本。结果还是一样。 @克里斯-马丁
似乎根据您的新代码，您正在加载缓存页面。如果您也在使用 PHP，请检查您的标头缓存设置，也许尝试 no-cache。

标签： javascript jquery html webpage

【解决方案1】：

在您的 .get 中，确保您指定了数据类型。通过将“刷新”添加到 .done，它告诉 AJAX 等到成功调用后重新加载表，我相信它会起作用。您可以尝试的另一件事是将 javascript 放在您的 </table> 之后的正文中，以便始终首先加载 HTML 表格。

<script type="text/javascript">
$(function() {
    jQuery.get('filename.txt', function(data) {
    var lines = data.split("\n");  
    var newrow = "";
    for (var i = 0, len = lines.length; i < (len-1); i=i+2) {
        newrow = "<tr><td>"+lines[i]+"</td>"+"<td>"+lines[i+1]+"</td></tr>";   
        $('#tableoverview').find('tbody:last').append(newrow);
        }
    },'text').done(function() {
                $("#tableoverview").table("refresh");
            });
}); 
</script>

您也可以尝试$(document.body).ready，它在正文加载之前不应执行。

<script type="text/javascript">
$(document.body).ready(
    $(function() {
        jQuery.get('filename.txt', function(data) {
        var lines = data.split("\n");  
        var newrow = "";
        for (var i = 0, len = lines.length; i < (len-1); i=i+2) {
            newrow = "<tr><td>"+lines[i]+"</td>"+"<td>"+lines[i+1]+"</td></tr>";   
            $('#tableoverview').find('tbody:last').append(newrow);
            }
        $("#tableoverview").table("refresh");
        });
    });
);
</script>

编辑：

我对此进行了一些研究，您似乎混合使用了表格小部件和回流表格小部件.table("refresh");。
您是否尝试过删除它并改用.table("reflow"); 和<table data-role="table" id="tableoverview" data-mode="reflow" class="ui-responsive table-stroke">？

【讨论】：

我尝试了您提到的替代方案，但没有结果。使用 .load 和/或 $(document.body).ready 根本不会加载表格，即使在刷新之后也是如此。至于 .table("reflow");与 data-mode="reflow" 一起，这也无济于事，结果与以前一样 - 即仅在重新加载页面后加载表格。
看来我给你的功能不正确，所以我编辑了我的答案。它需要是 .post 而不是 .load 但它不适用于您当前的语法。
我的最后一次尝试，看到我的第一个答案，我更新了},'text');
感谢所有帮助。我已经简化了我的代码，只在 JS 中显示警报，并且在第一页加载中也失败了。您的帮助将不胜感激。谢谢。