为什么这在页面加载时不起作用，但当我将 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>
最佳答案
根据您的网页设置方式判断，我怀疑您将内容注入(inject)到页面中的位置为:
<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 是否被单击，而不是在您之前单击试图将事件处理程序附加到尚不存在的元素。
关于javascript - JQuery 在粘贴到控制台时有效，但在页面加载时无效，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36946544/