如果我的函数在 document.ready 函数中，为什么它没有被调用？答案

【问题标题】：Why is my my function not being called if its inside the document.ready function?如果我的函数在 document.ready 函数中，为什么它没有被调用？
【发布时间】：2018-06-18 01:15:03
【问题描述】：

我有一个名为myFunction 的函数，它是从DOM 调用的。我也初始化了 jquery

<script>
  $( document ).ready(function() {
    function myFunction() {
        window.open("survey.html");
    } 
      $( "#begin" ).on("click", function() {
        event.preventDefault();
        console.log( "ready!" );
        Materialize.toast('Be a friend!', 2000);      
      });       
  });      
</script>

这是我的 HTML

<section class="jumbotron">
    <div class="container">
        <div class="row">
            <div class="col s8 desc">
               <h1>Welcome to Friend Finder</h1>
               <h3>Take our survey find your match.</h3>
               <a href="" id="begin" class="btn-large waves-effect waves-light red" onclick="setTimeout(myFunction, 3000);">BEGIN SEARCH</a><br>
        </div>
    </div>
  </section>

我的目标：当我点击标签时。 IT 将调用函数 myFunction 并等待 3 秒 setTimeout 将浏览器转移到下一页

window.open(survey.html).

【问题讨论】：

去掉内联的onclick... 并使用.on() 来定义事件处理程序。

标签： javascript jquery html function scope

【解决方案1】：

因为onclick 需要访问全局窗口空间中的函数。

但是，您在 $(document).ready 中声明了它，并且由于 “范围”，它只能在该回调中访问。只需将其移出ready

  function myFunction() {
     window.open("survey.html");
  } 

  $( document ).ready(function() {
    $( "#begin" ).on("click", function() {
    ....

【讨论】：

【解决方案2】：

在$(document).ready(function()...之外声明function myfunction()...

function myFunction() {
    window.open("survey.html");
} 

$( document ).ready(function() {
    $( "#begin" ).on("click", function() {
        event.preventDefault();
        console.log( "ready!" );
        Materialize.toast('Be a friend!', 2000);      
    });       
});

您的问题是 myFunction 的范围在 ready 函数中。所以你无法在全局范围内访问它。

阅读更多关于范围和闭包的信息here。

【讨论】：

【解决方案3】：

您确实意识到您可以使用不同类型的 onClick 事件，对吧？在许多情况下，这甚至是一种更正确的方法，因为$(document).ready() 意味着所有这些功能只能在整个文档正确加载后才能开始工作，而这正是您在大多数情况下想要的。因此，从底部开始比从顶部开始更正确。

$('#begin').click(function(){
    myFunction();
});

【讨论】：