Question

我为我的网站创建了一个注册页面，但它没有响应点击。我在一个名为signup.js的单独文件中有jQuery。我知道它已正确链接，因为警报有效。任何帮助都会被贬低。感谢

HTML：

<html>
    <head>

        <title>Sign Up</title>
        <script src="JS/jquery-3.1.1.min.js"></script>
        <script src="JS/signup.js"></script>
        <link rel="stylesheet" href="CSS/signup.css">
        <link rel="stylesheet" href="CSS/bootstrap.min.css">

    </head>

    <body>

        <div class="container">  

            <div class="jumbotron">

                <button id="signup-button">Sign Up</button>

            </div>    

        </div> 


    </body>

</html>

jQuery的：

$("#signup-button").click(function() {
    alert("clicked");
});

Answer 1

您正在尝试在加载DOM元素之前获取元素，因此它不会将处理程序附加到元素，因为它在该点不存在。要使其工作，请使用document ready handler对其进行包装，或者在标记中的元素后面移动脚本标记。

$(document).ready(function(){
  $("#signup-button").click(function() {
    alert("clicked");
  });
});

Answer 2

自最新的jquery更新以来，所有内容都指向.on，因此.click不再有效，请使用

$('#signup-button').on('click', function(){//code here})

相反，并确保将其放入DOM准备好

Answer 3

确保您的代码在document ready上执行。

$(function(){
  $("#signup-button").click(function() {
    alert("clicked");
  });
});

Answer 4

我建议你把你的jquery放在头部，将另一个javascript放在你身体的最后，因为你的js文件可能是＆＃34; read＆＃34;在你的jquery文件之前。

<html>
    <head>
        <title>Sign Up</title>
        <script src="JS/jquery-3.1.1.min.js"></script>
        <link rel="stylesheet" href="CSS/signup.css">
        <link rel="stylesheet" href="CSS/bootstrap.min.css">
    </head>
    <body>
        <div class="container">  
            <div class="jumbotron">
                <button id="signup-button">Sign Up</button>
            </div>    
        </div>
        <script src="JS/signup.js"></script>
    </body>
</html>

并将您的js文件更改为：

$(function(){
  $("#signup-button").click(function() {
      alert("clicked");
  });
});

因为$（function（）{}）;等待DOM加载并可以操作。

jQuery点击不被识别

4 个答案: