Question

我正在学习jquery，我在运行以下非常简单的代码时遇到了困难。

我的HTML看起来像：

<html>
<head>
    <title>JQUERY</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>

<input type="button" id="testbutton" value="test" />

</body>

我的script.js看起来像这样：

$(document).ready(function(){
  alert('document is ready');
});
$('#testbutton').click(function(){
  alert('button clicked');
});

当我在浏览器中加载页面时...我在文档加载时收到第一个警告（所以我确信我至少使用了正确的库并且它正在下载等等。）

然而，当我点击我的按钮时，我没有看到第二个警告“按钮已被点击”

我错过了什么？

Answer 1

click处理程序需要进入$(document).ready，以确保在DOM准备好时绑定它，并且保证该元素可用于Javascript处理：

$(document).ready(function(){
    alert('document is ready');

    // bind a click handler to #testbutton when the DOM has loaded
    $('#testbutton').click(function(){
      alert('button clicked');
    });
});

来自documentation：

这是第一个要了解的事情 jQuery：如果你想让一个事件发挥作用在你的页面上，你应该打电话给它在$（文件）.ready（）里面功能。里面的一切都会加载DOM后立即加载在加载页面内容之前。

Answer 2

您可能希望将事件处理程序绑定在$（document）.ready（）事件中：

$(document).ready(function(){
  alert('document is ready');

  $('#testbutton').click(function(){
   alert('button clicked');
  });
});

这可确保在执行其他脚本之前加载DOM。看看这是否能解决您的问题。

Answer 3

您还需要document.ready内的点击装订，如下所示：

$(function(){      //short for $(document).ready(function(){
  alert('document is ready');
  $('#testbutton').click(function(){
    alert('button clicked');
  });
});

为什么？是选择器$('#testbutton')如果在选择器运行时没有准备就找不到元素id="testbutton"，所以它需要在选择器运行之后运行页面中的元素，或上面的document.ready处理程序。

JQuery按钮未显示警报

3 个答案: