问JQuery在粘贴到控制台时工作，但在加载页面时不起作用。
EN

Stack Overflow用户

提问于 2016-04-29 11:59:26

回答 4查看 1.3K关注 0票数 0

为什么这在页面加载时不起作用，但当我将jquery粘贴到页面上的控制台时，它就能工作了。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Alex Cory</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
  </head>
  <body id="page-top" data-spy="scroll" data-target=".navbar-custom">
    <div id="root"></div>
    <script src="src/app.js"></script>
    <script src="//code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <script>
      $(document).ready(function(){
        $('.page-scroll a').bind('click', function(event) {
          console.log('CLICKED BUTTON! ^_^');
          event.preventDefault();
        });
      });
    </script>
  </body>
</html>

javascript

jquery

回答 4

Stack Overflow用户

回答已采纳

发布于 2016-04-29 12:05:10

从您的网页设置方式来判断，我怀疑您将内容注入到页面中的原因如下：

<script src="src/app.js"></script>

因为代码本身没有实际的内容。

在这种情况下，这是因为当页面加载和$(document).ready()触发时，$('.page-scroll a')返回null，因为它还没有呈现到DOM中，简单地说是这样。

要解决此问题，需要将事件处理程序附加到要在页面加载时呈现到页面中的元素。对于本例来说，body标记很好，我们希望侦听使用启动jQuery方法单击.page-scroll a：

// We attach a click event listener to the body element
// and we try to track when .page-scroll a is clicked 
$('body').on('click', '.page-scroll a' function(event) {
  console.log('CLICKED BUTTON! ^_^');
  event.preventDefault();
});

这是因为由于事件处理程序被附加到主体，所以每次在网页上单击某项内容时，它都会检查是否单击了.page-scroll a，而不是在尝试将事件处理程序附加到尚未存在的元素之前。

票数 2

Stack Overflow用户

发布于 2016-04-29 12:05:48

您的锚必须在DOM准备好之后创建。因此，应该将单击绑定到父元素，例如：

$('body').on('click', '.page-scroll a', function(e) {....});

这样，无论何时创建锚，只要单击主体和目标为.page-scroll a，函数都将被执行。

票数 1

Stack Overflow用户

发布于 2016-04-29 12:12:47

来自JQuery文档

在jQuery 1.7中，.on()方法是将事件处理程序附加到文档的首选方法。对于早期版本，.bind()方法用于将事件处理程序直接附加到元素。处理程序附加到jQuery对象中当前选定的元素，因此这些元素必须在调用.bind()时存在。有关更灵活的事件绑定，请参见.on()或.delegate()中关于事件委托的讨论。

所以你使用JQuery.on()方法

为什么您的代码控制台正是因为已经有了元素

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36946544

复制

jQuery遮罩（Mask）及弹窗时禁止页面滚动实现

jquery css html5 html

保险起见可以把 html 和 body 的高度都设置 100% ，如下，用添加 class 的方法实现：

德顺

2019/11/13