Question

我有以下jquery脚本来计算框中的字符

$('#myfield').keyup(function () {
    var left = 250 - $(this).val().length;
    if (left < 0) {
        left = 0;
    }
    $('#counter').text('put: ' + left);
});

如果我把这个代码放在它工作的字段之后，但我想把它外化到一个js文件..所以我把它复制到一个myscript.js 然后这样做：

 <script language="JavaScript" type="text/javascript" src="script/myscript.js"></script>

它的工作原理......问题是这个对myscript.js的调用只有在我在字段后面的相同位置声明它（它位于页面底部）时才会起作用..但是我想要包含它在所有其他js调用的顶部，如果我这样做，这将无法工作，因为我会得到“'null'为null或不是对象”。

所以我试着将它封装在文件就绪中但是即使我没有得到错误也没有发生任何事情，因为...函数似乎没有被执行。

$(document).ready(function(){
//function here
});

有什么建议吗？

Answer 1

您的选择器应为$('#myfield')，而不是$('$myfield')。并将其保留在文档就绪功能中。

修改的

无论是在外部JS文件中还是在同一个文件中都不应该有任何区别。包含该代码的位置会产生影响。我通常在<head>中包含我的所有JS脚本。它应该包含在$(function() { ... });中，以便在加载DOM之前不执行它。

看看this jsFiddle。请注意，如果更改onDomready / onLoad / No wrap-head / No wrap-body之间左框架中的下拉列表，则会更改代码是否有效。如果将其设置为onDomready，则生成的代码如下所示：

<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title> - jsFiddle demo</title> <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script> <link rel="stylesheet" type="text/css" href="/css/result-light.css"> <script type="text/javascript"> $(function(){ $('#myfield').keyup(function () { var left = 250 - $(this).val().length; if (left < 0) { left = 0; } $('#counter').text('put: ' + left); }); }); </script> </head> <body> <input type="text" id="myfield"> <p id="counter">put: 246</p> </body> </html>

请记住，JS代码直接位于头部而不是外部JS文件中的事实应该对此示例没有任何影响。如果您将<script>标记替换为具有相同JS代码的外部包含，并将其保留在同一位置，则它将起到相同的作用。

如果这仍然不适合你，那么我建议你制作一个自己的jsFiddle来证明你的问题。

Answer 2

您面临的问题是，当代码在HTML文件中时，它会在呈现字段后执行，但是当代码在文件中时，不再是这种情况。

因此，为了解决此问题，您应该在确定已将字段插入DOM后才设置keyup事件。

通常，这是通过将代码与$(document).ready()事件的处理程序一起封闭来完成的，如下所示：

$(document).ready(function(){
    $('#myfield').keyup(function () { // note #myfield instead of $myfield
        var left = 250 - $(this).val().length;
        if (left < 0) {
            left = 0;
        }
        $('#counter').text('put: ' + left);
    });
});

这将确保您的代码在文档中的所有元素都已呈现后运行，并且您可以与它们进行交互。

您可能也想查看ready()的jQuery文档。

Answer 3

我猜是#myfield
在底部加载javascript总是更好
它是

（文档）$。就绪（函数（）{}

jquery从js文件无法正常工作

3 个答案: