How to Handle Button Click Events in jQuery?

Question

I need to have a button and handle its event in jQuery. And I am writing this code but it'snot working. Did I miss something?

<!-- Begin Button -->  
<div class="demo">
<br> <br> <br>   
<input id = "btnSubmit" type="submit" value="Release"/>
<br> <br> <br>  
</div>
<!-- End Button -->

And in the javascript file

function btnClick()
{
    //    button click
    $("#btnSubmit").button().click(function(){
        alert("button");
    });    
}

Why not just take it out of the enclosing `btnClick` function? I don't see what that adds — CodyBugstein, Jul 23 '14 at 20:43

score 302 · Accepted Answer · answered Dec 01 '10 at 11:31

302

You have to put the event handler in the $(document).ready() event:

$(document).ready(function() {
    $("#btnSubmit").click(function(){
        alert("button");
    }); 
});

answered Dec 01 '10 at 11:31

Davide Gualano

12,813
9
44
65

score 32 · Answer 2 · edited May 25 '17 at 10:17

32

$('#btnSubmit').click(function(){
    alert("button");
});

or

//Use this code if button is appended in the DOM
$(document).on('click','#btnSubmit',function(){
    alert("button");
});

See documentation for more information:
https://api.jquery.com/click/

edited May 25 '17 at 10:17

Pang

9,564
146
81
122

answered May 25 '17 at 09:54

Bruce Phillip Perez

391
3
3

1

Button appended in the dom thing is always an issue if using notification like sweetalert. Thanks for pointing it out – Deepesh Thapa Dec 27 '19 at 10:39
1

Emphasis on if element is appended. So useful. Thank you – jovialcore Oct 01 '22 at 19:55
Appended to DOM +1! – Bilaal Abdel Hassan Dec 30 '22 at 21:19

score 28 · Answer 3 · edited Jul 28 '14 at 14:25

28

$(document).ready(function(){

     $('your selector').bind("click",function(){
            // your statements;
     });

     // you can use the above or the one shown below

     $('your selector').click(function(e){
         e.preventDefault();
         // your statements;
     });


});

edited Jul 28 '14 at 14:25

Charles Caldwell

16,649
4
40
47

answered Apr 28 '14 at 14:27

Lawrence Gandhar

718
8
12

5

Good because is the onlyone who insert the preventDefault() – Gabrer Dec 20 '14 at 11:16
14

As of jQuery 1.7, the `.on()` method is the preferred method for attaching event handlers to a document. Therefore this would be better: `$('your selector').on("click", ...);` – Tinynumbers Sep 02 '15 at 14:23

score 13 · Answer 4 · answered Sep 03 '18 at 14:40

13

Try This:

$(document).on('click', '#btnClick', function(){ 
    alert("button is clicked");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <button id="btnClick">Click me</button>

answered Sep 03 '18 at 14:40

Rafiqul Islam

931
11
14

1

This version has the benefit of still working if #btnClick is created after this script runs. – Jimbali Apr 27 '20 at 20:41

score 9 · Answer 5 · answered Dec 01 '10 at 11:31

9

 $("#btnSubmit").click(function(){
        alert("button");
    });

answered Dec 01 '10 at 11:31

Ali Tarhini

5,278
6
41
66

score 3 · Answer 6 · answered May 27 '14 at 07:11

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
  $("#button").click(function(){
    alert("Hello");
  });
});
</script>

<input type="button" id="button" value="Click me">

score 1 · Answer 7 · answered Feb 14 '13 at 05:49

1

<script type="text/javascript">

    $(document).ready(function() {

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

        alert("hello");

    });

    }
    );

</script>

answered Feb 14 '13 at 05:49

Anup Ghanshala

19
1

score 1 · Answer 8 · edited Jul 28 '14 at 14:26

1

$('#btnSubmit').click(function(event){
    alert("Button Clicked");
});

or as you are using submit button so you can write your code in form's validate event like

$('#myForm').validate(function(){
    alert("Hello World!!");
});

edited Jul 28 '14 at 14:26

Charles Caldwell

16,649
4
40
47

answered Jun 27 '14 at 04:55

Hiren

57
1
11

score 0 · Answer 9 · answered Oct 09 '13 at 17:03

0

Works for me

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

$("#btn").click(function() {
    alert("email")
});

</script>

answered Oct 09 '13 at 17:03

navyad

3,752
7
47
88

How to Handle Button Click Events in jQuery?

9 Answers9

Linked