jQuery simple button bind

Question

I'm new to jQuery, so this should be a simple question.

As far as I understand, I can bind a method to listen to an event, such as the click of a button, using

$('#buttonID').bind('click', function (){//some code});

However, this isn't working for me, so I must be doing something wrong.

This is my simple html file:

        <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js'></script>
    <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js'></script>
    <script src='test.js'></script>
    </head>

    <body>
    <input id="SignIn" type="button" value="Sign In"></input>
    </body>
    </html>

Apart from loading jQuery files, it loads file test.js, which looks like this:

// JavaScript Document
$('#SignIn').bind('click', function() {alert('hi');});

Is that not enough for binding? I was hoping this would fire an alert dialog, but it doesn't, it seems the callback is not executed at all.

What is wrong here? Both files (html and js) are located in the same directory, and Google Chrome does not complain about anything in the JavaScript console, so from that end, everything should be fine.

Thanks for all help!

You need a $(document).ready function, read the documentation for jQuery, it's in almost every example, an is the first thing you'll learn. — adeneo
– adeneo, Commented Sep 5, 2014 at 11:37
@BarlasApaydin - And that sound OK to you ? Then he should update! — adeneo
– adeneo, Commented Sep 5, 2014 at 12:23

Satpal · Accepted Answer · 2014-09-05 11:38:06Z

3

Wrap your code in document ready handler. It accepts a function which executes when DOM is fully loaded.

As you are using jQuery 1.3

$(document).ready(function() {
    $('#SignIn').bind('click', function() {
        alert('hi');
    });
});

For jQuery 1.7+,

$(document).ready(function() {
    $('#SignIn').on('click', function() {
        alert('hi');
    });
});

Additionally, As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document.

answered Sep 5, 2014 at 11:38

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

hansa Over a year ago

Ah yes, quick and simple answer. Thanks! Will mark as answer once SO allows me to do so.

ainu · Accepted Answer · 2014-09-05 11:38:51Z

1

$(function(){
    $('#SignIn').bind('click', function() {alert('hi');});
})

answered Sep 5, 2014 at 11:38

ainu

1511 gold badge1 silver badge9 bronze badges

Comments

kefy · Accepted Answer · 2014-09-05 11:38:53Z

1

Try

$(function(){
   $('#SignIn').click(function() {alert('hi');});
});

answered Sep 5, 2014 at 11:38

kefy

5352 silver badges10 bronze badges

Comments

Grim... · Accepted Answer · 2014-09-05 11:41:34Z

1

Move your Javascript to the bottom of the HTML page, right above the closing body tag.

That way the DOM is ready when it is loaded, and there's no need for $(document).ready() calls.

https://developer.yahoo.com/performance/rules.html#js_bottom

answered Sep 5, 2014 at 11:41

Grim...

17k7 gold badges47 silver badges62 bronze badges

Comments

PeterKA · Accepted Answer · 2014-09-05 11:42:36Z

1

You may want to include your JavaScript files at the very bottom, and everything should work as expected. It is recommended to do this and to include CSS files at the top (head tag). For more information see link included by @Grim...

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<input id="SignIn" type="button" value="Sign In"></input>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js'></script>
<script src='test.js'></script>
</body>
</html>

answered Sep 5, 2014 at 11:42

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

Comments

Grijesh Chauhan · Accepted Answer · 2014-09-05 11:41:04Z

0

$( "#target" ).click(function() {

//Write some code here

});

edited Sep 5, 2014 at 11:41

Grijesh Chauhan

58.6k20 gold badges145 silver badges214 bronze badges

answered Sep 5, 2014 at 11:39

user2412232

33 bronze badges

Comments

Dileep · Accepted Answer · 2014-09-05 11:41:10Z

0

You can try this.

$(document).ready(function(){
  $('#SignIn').on('click', function() {alert('hi');});

});

answered Sep 5, 2014 at 11:41

Dileep

5153 gold badges9 silver badges22 bronze badges

1 Comment

Baum mit Augen Over a year ago

Please explain what is wrong with OP's code and why this solves the problem by editing your answer.

prog1011 · Accepted Answer · 2014-09-05 11:45:42Z

0

You can use this.

$(document).ready(function () { $("#SignIn").click(function () { alert('demo'); }); });

answered Sep 5, 2014 at 11:45

prog1011

3,4856 gold badges34 silver badges59 bronze badges

1 Comment

prog1011 Over a year ago

#user2606742 - If answer is useful, Please click on 'correct' and give 'upvote' so it will helps other to find out correct solution.

Collectives™ on Stack Overflow

jQuery simple button bind

8 Answers 8

1 Comment

Comments

Comments

Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

1 Comment

Comments

Comments

Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related