3

我在使用 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 时，它可以正常工作！

帮助 ：（

4

4 回答 4

4

您自己说过，将其包装在文档就绪回调中将解决问题。

原因是您的 JavaScript 在元素实际位于 DOM 之前运行，因此在运行 JavaScript 时，没有任何元素与您的选择器匹配，因此无法附加 clickevent-listener。

如果您出于某种原因不想使用 DOM-ready 回调，另一种解决方案是在您关闭 body 元素之前将您的 JavaScript 作为您做的最后一件事。当浏览器到达那个点时，你的元素应该在 DOM 中，所以你的代码应该没问题。

解决方案 1：等待 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>
于 2012-11-01T20:57:30.377 回答
3

尝试将其包装在文档就绪函数中，如下所示，

$(function () {
  //content below will be executed only after DOM is ready
   $('#my-button').click(function() {
     console.log("Button Clicked");
   });
});
于 2012-11-01T20:55:37.057 回答
1

这不是一个错误。问题是当您的脚本运行时，您的按钮未呈现在页面上。当您将脚本包装在 $(document).ready() 中时，它将确保脚本仅在整个内容正确呈现后才运行。

于 2012-11-01T20:59:42.827 回答
0

您的 js 在您的 html 之前，这意味着$('#my-button')选择器为空。您可以尝试事件委托，以确保无论何时存在符合您的条件的元素，都有一个点击监听器：

$(document).on("click",'#my-button',function()
{
    console.log("Button Clicked");
});
于 2012-11-01T20:56:33.700 回答