1

我已经阅读了很多关于 $(document).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>
4

2 回答 2

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>

于 2017-01-24T14:40:22.770 回答
0

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

要解决此问题，您可以将函数直接移动到<script>标记内，从而在window范围内：

<!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>

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

<!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>

于 2017-01-24T14:15:06.803 回答