0

我有以下 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' is null or not an object"。

所以我尝试将它包含在准备好的文档中，但即使我没有收到错误，也没有任何事情发生，因为......该函数似乎没有被执行。

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

有什么建议么？

4

3 回答 3

1

你的选择器应该是$('#myfield')，不是$('$myfield')。并将其保存在文档准备功能中。

编辑：

无论是在外部 JS 文件中还是在同一个文件中，都不应该有任何区别。包含该代码的位置确实有所不同。我通常将我所有的 JS 脚本包含在<head>. 它应该被包裹起来，$(function() { ... });这样它就不会在 DOM 加载之前执行。

看看这个 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 来展示您的问题。

于 2013-04-10T14:03:49.780 回答
1

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

keyup因此，要解决此问题，您应该仅在确定该字段已插入 DOM 后设置您的事件。

通常这是通过将您的代码与$(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 文档。

于 2013-04-10T14:04:49.043 回答
0
  1. 我猜是#myfield
  2. 在底部加载javascript总是更好

  3. 这是

    $(文档).ready(函数(){}

于 2013-04-10T14:05:33.193 回答