我在使用 jQuery 时遇到了一些麻烦，我真的不知道我做错了什么。
我有一个包含静态内容和几个按钮的简单页面。当我想将点击事件附加到我的其中一个按钮时，我的问题就来了 - 它根本行不通!
这是我在 html 中的代码:
<head>
<link rel="stylesheet" href="css/main.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/my.js"></script>
</head>
<body>
....
<button class="btn btn-success" id="my-button">BUTTON</button>
</body>
这是我在 my.js 中的代码:
$('#my-button').click(function()
{
console.log("Button Clicked");
});
无论我点击按钮多少次，无论我使用哪个浏览器，消息都不会进入控制台。我只是不明白，我以前没有遇到过这样的问题...我希望这不是一个明显的错误。
我还应该指出，当我将其更改为 $(document).ready 时，它工作正常!!
帮助:(
最佳答案
你自己说的，将其包装在文档就绪的回调中将解决问题。
原因是您的 JavaScript 在元素实际进入 DOM 之前运行，因此在运行 JavaScript 时，没有元素匹配您的选择器，因此无法附加 clickevent-listener。
如果您出于某种原因不想使用 DOM 就绪回调，另一种解决方案是在您执行的最后一件事中包含您的 JavaScript，就在您关闭 body 元素之前。当浏览器到达那个点时，您的元素应该在 DOM 中，因此您的代码应该没问题。
解决方案一:WAITING DOM 就绪
$(function () {
$('#my-button').click(function() {
console.log("Button Clicked");
});
});
解决方案 2:最后加载 JavaScript
<head>
<link rel="stylesheet" href="css/main.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
</head>
<body>
....
<button class="btn btn-success" id="my-button">BUTTON</button>
<script type="text/javascript" src="js/my.js"></script>
</body>
关于javascript - jQuery Click 的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13185309/