CODEWITHSUNDEEP
javascriptjqueryhtml
Daniel Knight
Daniel Knight

Reputation: 33

Problems with jQuery Click

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

Upvotes: 3

Views: 94

Answers (4)

Christofer Eliasson
Christofer Eliasson

Reputation: 33865

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>

Upvotes: 4

Lasantha Bandara
Lasantha Bandara

Reputation: 809

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.

Upvotes: 1

user1726343
user1726343

Reputation:

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

Upvotes: 0

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

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

Upvotes: 3

Related Questions