Question

我尝试在代码中使用“ on”，但失败了。我尝试的代码是这样的：

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript">
    function clickHandler(e) {
      alert('Click!');
    }
    $(document).on('ready', function() {
      $('#click_me').on('click', clickHandler);
    })
  </script>
</head>

<body>
  <input id="click_me" type="button" value="click me" />
</body>

</html>

尽管我可以用下面的代码替换此代码。我仍然想知道为什么我的事件on的第一个代码不起作用。

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript">
    function clickHandler(e) {
      alert('Click!');
    }
    $(document).ready(function() {
      $('#click_me').click(clickHandler);
    })
  </script>
</head>

<body>
  <input id="click_me" type="button" value="click me" />
</body>

</html>

Answer 1

从on()的文档中，重点是我的：

还有$(document).on("ready", handler)，自jQuery 1.8起不推荐使用， 在jQuery 3.0中已删除 。请注意，如果在附加此事件之前DOM准备就绪，则将不执行处理程序。

Answer 2

之所以会这样，是因为ready不是事件（jQuery和html中都不是）。 jQuery已创建此函数来确定文档的状态。所以不要混淆这两件事。

只有两种方法可以使用就绪状态。通过ready函数或简写，基本上是相同的：

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


$(function() {
    // ...
});

Answer 3

下面提到的第一个代码不是有效的jquery。

$(document).on('ready', function() {

请使用此密码。

$(function(){

});
//Or
$(document).ready(function() {

});

ready（）工作正常，on（'ready'）工作异常，为什么？

3 个答案: