Question

为什么这不适用于页面加载，但是当我将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>

Answer 1

根据您的网页设置方式判断，我怀疑您是将内容从以下网址注入页面：

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

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

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

要解决此问题，您需要将事件处理程序附加到将在加载时呈现到页面中的元素。 body标记适用于此示例，我们希望使用jQuery's on方法监听.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，而不是在您尝试附加事件处理程序之前到一个尚不存在的元素。

Answer 2

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

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

这样，无论何时创建锚点，只要单击一个body并且target为.page-scroll a，该函数就会被执行。

Answer 3

来自JQuery文档

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

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

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

Answer 4

问题是因为你想在DOM还没有准备好的时候调用一个函数。

插入正文标记

//link to the script file here
<body         onload="enterHereYourFunctionYouWantToLoad () " >

这将加载您的函数，并且在加载页面时将运行该特定函数。

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

4 个答案: