Question

我读过很多关于$（文件）的信息.ready（function（）当它有用时，它很清楚，所以一般我写$（document）.ready（function（）里面的

但是，为什么是魔鬼，为什么在这么简单的情况下KO呢？如果你只是推迟le $（doc ....它完美地运作

代码：

<?php
?>
<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script defer>
            $(document).ready(function(){
                //alert('ready boy');
            function changeText(id) {
                id.innerHTML = "Ooops!";
            }
            });
        </script>
    </head>
<body>

<h1 onclick="changeText(this)">Click on this text!</h1>



</body>
</html>

Answer 1

首先，我建议不要使用内联JavaScript，因为维护代码可能很困难。因此，您不需要命名函数。

其次，命名函数不能全局访问，这是内联代码正在寻找它。

以下是演示如何解决此问题的演示：

$(document).ready(function(){
    //alert('ready boy');
    $('h1.changeit').on('click', function() {
        $(this).text('Ooops!'); //.html('Ooops!')
        //OR this.innerHTML = "Ooops!";
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1 class="changeit">Click on this text!</h1>

Answer 2

这是一个范围问题。使用过时的on*事件属性时，您调用的函数必须在window的范围内定义。在您的代码示例中，您已经在jQuery的ready处理程序范围内定义了它。

要解决此问题，您可以将该功能直接移至<script>标记内，从而移至window范围内：

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script defer>
    $(document).ready(function() {
      console.log('ready boy');
    });

    function changeText(id) {
      id.innerHTML = "Ooops!";
    }
  </script>
</head>
<body>
  <h1 onclick="changeText(this)">Click on this text!</h1>
</body>
</html>

＆＃13;

或者，您最好删除on*事件属性并使用不显眼的Javascript附加事件处理程序：

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script defer>
    $(document).ready(function() {
      console.log('ready boy');

      $('h1').click(function() {
        this.innerHTML = "Ooops!";
        // $(this).text('Ooops!'); // alternative
      });
    });
  </script>
</head>
<body>
  <h1>Click on this text!</h1>
</body>
</html>

＆＃13;

Jquery和$（document）.ready（function（）

2 个答案: