当有一个函数在 $(document）.ready(） 中

when has a function to be in $(document).ready()

本文关键字：document ready 有一个 函数      更新时间：2023-09-26

我只是不明白。我搜索了又搜索，但为此我无法弄清楚什么是"正确的"。

有三个例子。

1( 小提琴 1.0在这里，我们html了onlick="function"和javascript功能

，也可以正常工作 
 <span class="classic one"   onclick="someFunction(this,'one')">CLICK HERE</span>
 <script type="text/javascript">
    function someFunction(obj,nr) {
        var string = $(obj).attr('class');
        $('.result').text( string );
    }
</script>

2( 小提琴 2.0然后，当我将函数移动到脚本部分(将其移动到.js文件(时，我收到错误"引用错误：未定义某些函数">

这就是问题开始的地方

3( 小提琴 3所以现在我在文档中有一个函数，可以使用 .on(单击它总是工作正常。此函数正在调用另一个位于 document.ready(( 之外的函数，并且工作正常。

所以问题来了。我什么时候必须定义函数的位置以及为什么它总是工作？

谢谢！

示例 3( 中的所有代码如下所示：

<div class="result">result</div>
    <span class="classic one"   onclick="someFunction(this,'one')">CLICK HERE</span>
    <span class="classic two"   onclick="someFunction(this,'two')">CLICK HERE</span>
    <span class="classic three" onclick="someFunction(this,'three')">CLICK HERE</span>
    <span class="classic four"  onclick="someFunction(this,'four')">CLICK HERE</span>
<div class="ready">ready</div>

<span class="callOtherFunction">Call other function</span>

<script type="text/javascript">
    $(document).ready(function(){
        $('.ready').text( 'dom is ready' );
        function someFunction(obj,nr) {
                var string = $(obj).attr('class');
                $('.result').text( string );
            }
         $( "span.callOtherFunction" ).on({
            click: function() {
                $(this).css("color","red");
                $(this).addClass("xyz");
                otherFunctionCallingFunction($(this));
            }
        });
    });
    function otherFunctionCallingFunction($me) {
        $('.callOtherFunction').append( ' --> ' + $me.attr('class') );
    }
</script>

你看到的很多东西都是因为 jsFiddle 非常令人惊讶的默认设置，即将代码包装在脚本窗格中的 onload 处理程序中。因此，您的代码被包装在一个函数中，不再在全局范围内(如果您使用 onclick 样式属性，这是函数需要的位置(。您可以使用左侧的下拉框(第二个，在库和脚本列表下(进行更改。将其更改为"无换行"以解开包装代码。

你不是(到目前为止！(第一个被这个令人惊讶的默认值咬的人。

回答您的主要问题：

当函数在 $(document(.ready(( 中时

如果你控制加载脚本的script标签的位置，你基本上不必使用ready;相反，只要确保你的script标签在HTML的末尾，就在结束</body>之前。

当然，您可以使用ready。这样做的原因是确保在代码运行之前已创建所有 DOM 元素。但是，如果您将script标签放在末尾，那已经是真的了。您仍然可以在ready处理程序之外定义函数(如果您希望它们是全局变量(，但是如果您使用的是 ready ，您将从ready处理程序调用它们，以便元素存在。

FWIW，我会避免使用 onclick 样式的属性来连接事件处理程序，主要是因为它们需要您创建全局函数。当可以避免创建任何全局符号时，我宁愿避免创建任何全局符号。

我推荐的一般形式：

<!-- ...your page markup here... -->
<script src="any_libraries_you_need_if_you_are_not_combining.js"></script>
<script src="your_script.js"></script>
</body>
</html>

您的脚本如下所示：

(function($) { // A scoping function that wraps everything
    // Hook up event handlers here. You can use `$` for jQuery, even if
    // you've used noConflict, because we have a private `$` symbol (see
    // the `$` argument above)
    // The body of your code goes here
})(jQuery); // <== Note how we're passing the jQuery reference in
            // and immediately executing the scoping function

下面是一个完整的示例：实时复制

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Script Placement Example</title>
</head>
<body>
  <input type="button" class="hello-button" value="Click me">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
  <script>
    // This would be in a file, rather than inline
    (function($) {
      // Hook up handlers
      $(".hello-button").click(sayHello);
      // Body of the code
      function sayHello() {
        $("<p>Hello!</p>").appendTo(document.body);
      }
    })(jQuery);
  </script>
</body>
</html>

在 JavaScript 中，作用域是按函数处理的。函数范围内的任何内容都可以访问该函数范围内的其他事物以及更广泛范围内的事物。

在函数中定义具有var的变量会将该变量的范围限制为函数。

在另一个函数中使用函数声明定义一个函数会将定义的函数的范围限制为容器函数。

当你使用ready时，你向它传递一个函数。当然，该函数中定义的任何内容都限定为该函数。由于它的作用域为该函数，因此它不是全局函数。您的 onclick 属性未在该函数的范围内定义，它只能访问全局变量。这就是您收到引用错误的原因。

避免全局变量。它们使事情难以维护。避免onclick属性，它们通常依赖于全局变量。

如果您希望代码在完全构造 DOM 后运行，则需要使用 ready。如果要使用 JS(例如使用 jQuery.on(将事件处理程序绑定到其中的元素，这将很有用。执行此操作，而不是使用onclick属性。

相关文章：