168

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");
    });    
}
1
  • 1
    Why not just take it out of the enclosing btnClick function? I don't see what that adds Commented Jul 23, 2014 at 20:43

9 Answers 9

311

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

$(document).ready(function() {
    $("#btnSubmit").click(function(){
        alert("button");
    }); 
});
Sign up to request clarification or add additional context in comments.

Comments

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

3 Comments

Button appended in the dom thing is always an issue if using notification like sweetalert. Thanks for pointing it out
Emphasis on if element is appended. So useful. Thank you
Appended to DOM +1!
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;
     });


});

2 Comments

Good because is the onlyone who insert the preventDefault()
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", ...);
14

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> 

1 Comment

This version has the benefit of still working if #btnClick is created after this script runs.
9
 $("#btnSubmit").click(function(){
        alert("button");
    });    

Comments

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

Comments

1

<script type="text/javascript">

    $(document).ready(function() {

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

        alert("hello");

    });

    }
    );

</script>

Comments

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

Comments

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>

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.