Question

我正在尝试从JavaScript触发器调用onclick函数。

HTML部分：

<div class="my_radio">
    <input type="radio" name="my_radio" value="1" onclick="my_func()"/>  first button
</div><!-- end of class my_radio -->

JavaScript代码

<script type="text/javascript">
    $(document).ready(function(){
        function  my_func(){
            alert("this is an alert");
        }
    });
</script>

它不起作用。

但如果我将JavaScript功能保留在$(document).ready()代码之外，则可行。以下是相关的代码段：

<script type="text/javascript">
    $(document).ready(function(){
        function  my_func111(){
            alert("this is an alert");
        }
    });

    function  my_func(){
        alert("this is an alert");
    }
</script>

1）为什么第一个JavaScript代码段不起作用？

2）如何让第一个JavaScript代码段正常工作？

编辑：

因为我知道，当网页完全加载时会执行$(document).ready()。那么，如果我在my_func()之外写my_func()，如何阻止$(document).ready()在完整页面加载之前或之后生效？

Answer 1

所有关于javascript执行上下文和范围。

您在函数中定义的所有内容仅在此函数中知道。

在第一次测试中，函数my_func()只能在就绪回调（以及内部其他对象）中使用。你不能在外面引用它。

在第二个示例中，函数my_func()对文档是全局的，可以从任何地方访问。

我知道这可能是一个简单的简单解释： - ）

Answer 2

如果在回调中定义函数，则只能在此回调中使用它：

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

  //..

  something(); // Will work
}

something(); // Won't work

Answer 3

您的第一个代码段不起作用，因为函数my_func111在中定义了匿名函数的本地范围作为$(document).ready调用中的参数传递

您可以通过将函数定义放在文档范围内并在ready函数中调用它来修复代码，例如：

function my_func(){
   alert("this is an alert");    
}

$(document).ready(function(){
   my_func();
});

Answer 4

我认为“它不起作用”，你的意思是说“my_func没有定义”或类似吗？

在函数中定义函数时，内部函数在外部函数外部是不可见的（除非它是外部函数的return语句的一部分）。

您需要了解闭包，可以找到一个很好的教程here。

Answer 5

您将添加全局变量isReady。 $(document).ready回调部分会将其更改为true。

您的函数和isReady变量都必须在$(document).ready的回调之外定义，以便可以从回调范围之外看到它们。

<script type="text/javascript">
var isReady = false;    // outside the onReady callback

function  myFunc(){     // also outside the onReady callback
    if (!isReady) return; // abort if not ready

    alert("this is an alert");
}


// the onReady callback
$(function(){  // the newer jquery shorthand for: (document).ready(function(){
    isReady = true;
});

</script>

您的HTML代码无需更改。 - 我更改了名称以使用JS和HTML约定，但基本上它与您最初编写的内容相同...

<div class="divMyRadio">

<input type="radio" id="myRadio" value="1" onclick="myFunc()"/>  first button

</div><!-- end of class divMyRadio -->

我作为旁注：较新的JQuery使用$(function(){作为$(document).ready(function(){的简写，以使您更轻松。

javascript函数在jquery $（document）.ready块中不起作用

5 个答案: