Question

我在使用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");
});

无论我点击按钮多少次，无论我使用哪种浏览器，都不会将消息输入控制台。我只是不明白，我之前没有这样的问题......我希望这不是一个明显的错误。

我还应该指出，当我将其更改为$（文档）.ready时它工作正常!!

帮助:(

Answer 1

你说它是你自己，将它包装在准备文件的回调中将解决问题。

这样做的原因是你的JavaScript在元素实际存在于DOM之前运行，所以在运行JavaScript时，没有元素匹配你的选择器，因此不能附加clickevent-listener。

如果由于某种原因不想使用支持DOM的回调，另一种解决方案是在关闭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>

Answer 2

尝试将其包含在document ready函数中，如下所示

$(function () {
  //content below will be executed only after DOM is ready
   $('#my-button').click(function() {
     console.log("Button Clicked");
   });
});

Answer 3

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

Answer 4

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

$(document).on("click",'#my-button',function()
{
    console.log("Button Clicked");
});

jQuery的问题点击

4 个答案: