JQuery click event not triggered

Question

I have a button on one of my views

<div class="span12">
    <button id="saveButton" class="btn"><i class="icon-download-alt green"></i> Save</button>
</div>

and a JQuery click event

$("#saveButton").click(function () {
    alert("Save clicked"); 
});

For some reason the click event is never triggered. If I place an alert before the JQuery event the alert is triggered successfully.

I'm sure I'm missing something really simple here, but I cant seem to find the problem.

I made sure that

JQuery is included successfully
The javascript file is included successfully
I use the correct Id for the control

Is there any reason why this event is not triggered?

Is the html snippet loaded in the initial DOM? If not, then use jquery's .on() function. — Bas Wildeboer
– Bas Wildeboer, Commented Oct 8, 2013 at 9:55
You have to make sure the click event listener is declared after the document has loaded. So using jQuery, please see documentation HERE — Stphane
– Stphane, Commented Oct 8, 2013 at 9:59

Rory McCrossan · Accepted Answer · 2013-10-08 09:50:03Z

4

You need to put your code in a document ready handler. Without it jQuery will attempt to attach the click event before the element exists in the DOM.

$(function() {
    $("#saveButton").click(function () {
        alert("Save clicked"); 
    });
});

answered Oct 8, 2013 at 9:50

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

Comments

Nitish Kumar · Accepted Answer · 2013-10-08 09:50:20Z

3

Try this:

 $( document ).ready(function() {
    $("#saveButton").click(function () {
      alert("Save clicked"); 
    });
  });

answered Oct 8, 2013 at 9:50

Nitish Kumar

4,8503 gold badges22 silver badges38 bronze badges

Comments

Sunil Verma · Accepted Answer · 2013-10-08 09:53:32Z

0

please check working fiddle here :

http://jsfiddle.net/6e2q3/

$( document ).ready(function() {
    $("#saveButton").click(function () {
        alert("Save clicked"); 
    });
});

answered Oct 8, 2013 at 9:53

Sunil Verma

2,5001 gold badge17 silver badges15 bronze badges

Comments

kiran · Accepted Answer · 2013-10-08 09:56:11Z

0

$(function() {
$("#saveButton").click(function () {
    alert("Save "); 
});

});

hope this will works

answered Oct 8, 2013 at 9:56

kiran

3051 gold badge2 silver badges13 bronze badges

Comments

Ajith S · Accepted Answer · 2013-10-08 09:59:20Z

0

Here is the working code,

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
        <script>
            $(document).ready(function(){
                $("#saveButton").click(function () {
                    alert("Save clicked"); 
                });
            });

        </script>
    </head>
    <body>
        <div class="span12">
            <button id="saveButton" class="btn"><i class="icon-download-alt green"></i> Save</button>
        </div>
    </body>
</html>

JS Fiddle

edited Oct 8, 2013 at 9:59

answered Oct 8, 2013 at 9:53

Ajith S

2,9172 gold badges20 silver badges30 bronze badges

Collectives™ on Stack Overflow

JQuery click event not triggered

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related