如何将 document.ready 移动到 js 文件？答案

【问题标题】：How to move document.ready to js file?如何将 document.ready 移动到 js 文件？
【发布时间】：2016-12-20 11:01:22
【问题描述】：

我在一个 aspx 页面中完成了 jquery 代码。现在我想将代码移动到 Report-Filter.js 文件。我试图移动和执行。但它不起作用。

这是我的代码；

<link href="css/jquery-ui.css" rel="stylesheet" />
<script src="js/jquery-3.1.1.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/Report-Filter.js"></script>      -------> // code

<script src="js/bootstrap.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" />

<link href="css/ReportsSalesAll-style.css" rel="stylesheet" />
<link href="css/Accordian-Hide-Show.css" rel="stylesheet" />
<script src="js/Accordian-Hide-Show.js"></script>


<script type="text/javascript">
    $(document).ready(function () {
        // Moved code to Report-Filter.js file
    })
</script>

但我没有得到输出。我在代码中做错了什么。

【问题讨论】：

But I didn't get the output.，什么输出？从您在此处粘贴的代码开始，什么都不会发生。
你在文件中使用过$(document).ready(function () {.. })吗？
@Satpal 不，我没有在文件中使用$(document).ready(function () {.. })
那是你的问题。您仍然需要将其包含在外部文件的 JS 中
@RoryMcCrossan 是的。现在它正在工作。谢谢

标签： javascript jquery asp.net

【解决方案1】：

无需在.js 文件中写入脚本标签从js 文件中删除脚本标签

<script type="text/javascript">
    $(document).ready(function () {
        // Moved code to Report-Filter.js file
    })
</script>

应该是

$(document).ready(function () {
    // Moved code to Report-Filter.js file
})

另外，最好将文件的link 放在close 的body tag 之前

【讨论】：

【解决方案2】：

我不完全确定您要做什么，但我会假设一些事情。

我认为你需要的是

创建一个新文件并将javascript代码放在那里像 Leopard 所说的那样。
在您的代码中引用您的新 javascript 文件，如您的问题。请务必在引用 JQuery 后引用此内容图书馆。
测试您的代码。例如，通过在您的 Javascript 中添加警报文件某处。像这样：alert("test");

一些一般提示：

始终将 CSS 引用放在 JS 引用之前（最好在文件的头部）。这样页面不会在视觉上卡顿加载时，因为放在屏幕上的元素已经风格化。
始终将您引用的脚本放在您的 HTML 元素下方。这样页面不会花费太长时间来显示，因为脚本不会事先加载，但之后（无论如何这是正确的，因为您的代码在文档加载完成后运行）

最终它应该看起来像这样：

Javascript 文件 (js/new-javascript-file.js)：

$(document).ready(function () {
    alert("test");
})

Html / CSHtml / Aspx 文件（不确定你用的是什么）：

<link href="css/jquery-ui.css" rel="stylesheet" />
<link href="css/ReportsSalesAll-style.css" rel="stylesheet" />
<link href="css/Accordian-Hide-Show.css" rel="stylesheet" />
<link href="css/bootstrap.css" rel="stylesheet" />

<script src="js/jquery-3.1.1.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/Report-Filter.js"></script>

<script src="js/bootstrap.js"></script>

<script src="js/Accordian-Hide-Show.js"></script>
<script src="js/new-javascript-file.js"></script>

【讨论】：