无法获得最基本的点击事件绑定工作

时间:2017-09-25 02:33:55

标签: javascript jquery html

我是javascript的新手,我尽可能多地尝试调试但是我仍然无法理解为什么当我点击文本时我无法显示警告“事件1”:

<!DOCTYPE html>
<html>

  <head>
    <title>Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
  <script type="text/javascript" language="javascript">


    $("#id").bind("click", function() {
      alert("Event 1");
    });

  </script>

  <body>
  <div class="foo" id="id">Click</div>
  </body>
</html>

1 个答案:

答案 0 :(得分:2)

问题是您需要确保只在页面加载后绑定到元素,因此可以访问该元素。这可以通过将现有的jQuery包装在 $(document).ready() 中来完成,如以下工作示例所示。

另请注意,自jQuery 3.0起, .bind() 已被弃用,您应该使用 .on() 。请注意,您使用.on定位的元素必须在您调用它们时存在:

  

事件处理程序仅绑定到当前选定的元素;它们必须在您的代码调用.on()

时存在

如果您的目标元素在页面加载时在DOM中显示,则可以使用 event delegation 绑定到 <的元素/ strong>在页面加载时可见,然后委托该功能到目标。

<!DOCTYPE html>
<html>

<head>
  <title>Title</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<script type="text/javascript" language="javascript">
  $(document).ready(function() {
    $("#id").on("click", function() {
      alert("Event 1");
    });
  });
</script>

<body>
  <div class="foo" id="id">Click</div>
</body>

</html>

希望这有帮助! :)