jQuery click not being recognized

Question

Im creating a signup page for my website but it is not responding to a click. I have the jQuery in a seperate file called signup.js. I know it is linked properly because an alert works. Any help would be apreciated. Thanks

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");
});

Make sure your jquery plugin(s) src are valid and when you are using `.click(function(){})` you have to bind that event on `document.ready(function(){//your code})` .. — TechVision, Feb 10 '17 at 11:26
i Think your jquery is not being loaded or the path is wrong.. — Sahil Dhir, Feb 10 '17 at 11:26
some time alert disabled by browser try $("#signup-button").click(function() { console.log("clicked"); }); — R. S., Feb 10 '17 at 11:27

Pranav C Balan · Accepted Answer · 2017-02-10T11:28:36.627

6

You are trying to get the element before loading the DOM element so it won't get attach the handler to the element since it's not present at that point. To make it works wrap it using document ready handler or move the script tag after the element in the markup.

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

edited Feb 10 '17 at 11:28

answered Feb 10 '17 at 11:24

Pranav C Balan

113,687
23
165
188

score 0 · Answer 2 · answered Feb 10 '17 at 11:24

0

Since the latest jquery update, everything is pointed on .on so .click is no longer valid, use

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

instead, and make sure you put it in a DOM ready

answered Feb 10 '17 at 11:24

FllnAngl

556
1
5
30

Can you provide evidence for your assertion that `.click()` *"is no longer valid"*. There's nothing wrong with using `.click()`, its a perfectly valid (and in some cases preferred) shortcut to `.on("click"..`. – freedomn-m Feb 10 '17 at 11:41
yeah I didn't mean that haha, i couldn't think of the right word. Sorry. I would prefer .on over .click because .on uses less memory and works for dynamically added elements. http://stackoverflow.com/a/11878976/7241073 This answer explains it – FllnAngl Feb 10 '17 at 12:17

score 0 · Answer 3 · answered Feb 10 '17 at 11:24

0

Make sure your code is executed on document ready.

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

answered Feb 10 '17 at 11:24

Vladu Ionut

8,075
1
19
30

Jonathan Machado · Answer 4 · 2017-02-10T17:51:08.437

I recommend you just put your jquery in the head, and the other javascript in the end of your body, because your js file is probably be "read" before your jquery file.

<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>

and change your js file to:

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

because the $(function(){}); waits until the DOM is load and can be manipulated.

The logic is fine, but the explanation is misleading... *"because the $(function(){}); waits until the **jquery** file is be all loaded"* — freedomn-m, Feb 10 '17 at 11:41

jQuery click not being recognized

4 Answers4