How to Handle Button Click Events in jQuery?

Jquery

Jquery Problem Overview


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

Jquery Solutions


Solution 1 - Jquery

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

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

Solution 2 - Jquery

$(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;
     });
    

});

Solution 3 - Jquery

$('#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/

Solution 4 - Jquery

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> 

Solution 5 - Jquery

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

Solution 6 - Jquery

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

Solution 7 - Jquery

<script type="text/javascript">

    $(document).ready(function() {

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

        alert("hello");

    });
  
    }
    );

</script>

Solution 8 - Jquery

$('#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!!");
});

Solution 9 - Jquery

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>

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAhmad FaridView Question on Stackoverflow
Solution 1 - JqueryDavide GualanoView Answer on Stackoverflow
Solution 2 - JqueryLawrence GandharView Answer on Stackoverflow
Solution 3 - JqueryBruce Phillip PerezView Answer on Stackoverflow
Solution 4 - JqueryRafiqul IslamView Answer on Stackoverflow
Solution 5 - JqueryAli TarhiniView Answer on Stackoverflow
Solution 6 - JqueryNivedinyView Answer on Stackoverflow
Solution 7 - JqueryAnup GhanshalaView Answer on Stackoverflow
Solution 8 - JqueryHirenView Answer on Stackoverflow
Solution 9 - JquerynavyadView Answer on Stackoverflow