Problems with jQuery Click

Question

I'm having a bit of trouble with jQuery, and I really have no idea what I'm doing wrong.

I have a simple page with static content and a few buttons. My problem comes when I want to attach a click event to one of my buttons - it just won't work!

Here is the code I have in my 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>

And here is the code I have in my.js:

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

No matter how many times I click the button, no matter which browser I use the message is never entered to the console. I just don't get it, I've not had a problem like this before... I'm hoping it's not an obvious mistake.

I should also point out that when I change this to $(document).ready it works fine!!

Help :(

Christofer Eliasson · Accepted Answer · 2012-11-01 21:08:40Z

4

You said it your self, wrapping it in a document-ready callback will solve the problem.

The reason to this is that your JavaScript is run before the element actually is in the DOM, so at the time the JavaScript is run, no element match your selector, and therefor no clickevent-listener can be attached.

If you for some reason don't want to use a DOM-ready callback, another solution would be to include your JavaScript the last thing you do, just before you close your body element. When the browser get to that point, your element should be in the DOM, so your code should be fine.

Solution 1: Wait for DOM to be ready

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

Solution 2: Load JavaScript last

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

edited Nov 1, 2012 at 21:08

answered Nov 1, 2012 at 20:57

Christofer Eliasson

34k7 gold badges77 silver badges103 bronze badges

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

4 Comments

SpYk3HH Over a year ago

I plus 1 for the first part, but i completely disagree with the load js last. how he has it loaded is just fine

Christofer Eliasson Over a year ago

@SpYk3HH I'm not saying that loading the script in the head is wrong, but in that case he needs to use a DOM-ready callback. I'm saying that there is another way as well, and that is to load the JavaScript las.

SpYk3HH Over a year ago

eh, i see, i just think it bad practice and not a good sug for a nub, just personal opinion i guess tho

Christofer Eliasson Over a year ago

@SpYk3HH Yeah, well some might say that it actually is best practice to load scripts last, but I'd say it depends on the situation, and this is probably not the place for such a discussion.

Selvakumar Arumugam · Accepted Answer · 2012-11-01 20:55:37Z

3

Try wrapping it inside document ready function like below,

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

answered Nov 1, 2012 at 20:55

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

1 Comment

Daniel Knight Over a year ago

Wow... I am such a fool. I'm going to go and hang my head in shame, then come back and try again later. But anyway, that solved it, thanks a bunch :D

Lasantha Bandara · Accepted Answer · 2012-11-01 20:59:42Z

1

This is not a mistake. Problem is when your script runs, your button is not rendered on the page. When you wrap the script in $(document).ready(), it will ensure that the script runs only after the whole content is rendered correctly.

answered Nov 1, 2012 at 20:59

Lasantha Bandara

8093 gold badges10 silver badges22 bronze badges

Comments

user1726343 · Accepted Answer · 2012-11-01 20:56:33Z

0

Your js precedes your html, which means the $('#my-button') selector comes up empty. You could try event delegation, to ensure no matter when an element that matches your criteria comes into existence, there is a click listener for it:

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

answered Nov 1, 2012 at 20:56

user1726343

Collectives™ on Stack Overflow

Problems with jQuery Click

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related