jQuery的问题点击

时间:2012-11-01 20:54:19

标签: javascript jquery html

我在使用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时它工作正常!!

帮助:(

4 个答案:

答案 0 :(得分:4)

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

这样做的原因是你的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>

答案 1 :(得分:3)

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

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

答案 2 :(得分:1)

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

答案 3 :(得分:0)

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

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