jquery button onclick

jquery version 1.7.1
All code except 'attr' run successful in platform such as chrome, firefox and ie.
For this article the jquery's "attr" can't set the click event to button in IE.
The click() method simulates a mouse-click on an element.
You have four way to set the click to button use jquery.
The first way is a shortcut for .bind("click", handler), as well as for .on("click", handler) as of jQuery 1.7.
The third way is .attr('onclick',handler).
The last way is direct use .click(handler).

1.How to bind the onclick event to button in jquery?
1.1.How to use unbind method disable the onclick event in jquery?
2.How to use "on" method bind the onclick event to button in jquery?
2.1.How to use "off" method disable the onclick event in jquery?
3.How to use "attr" method set the onclick event to button in jquery?
3.1.How to use "attr" method clear the onclick event in jquery?
4.How to enable/disable "click" method to button in jquery?
5.How to call the onclick method in jquery?
6.How to use javascript to set onclick event to button?
6.1.How to call button click method in javascrpt?
6.2.How to use jquery delete onclick event in javascript?
7.Demo for jquery button click

1.How to bind the onclick event to button in jquery?
  bind's Description: Attach a handler to an event for the elements.
  A basic usage of .bind() is:
 

$("#xxx").bind('click', function(){alert("xxx");});

  This code will cause the element with an ID of xxx to respond to the click event. When a user clicks inside this element thereafter, the alert will be shown.

1.1.How to use unbind method disable the onclick event in jquery?
  unbind's Description: Remove a previously-attached event handler from the elements.
  A basic usage of .unbind() is:
 

$("#xxx").unbind("click");

  This code will cause the element with an ID of xxx to removes the handlers regardless of type.

2.How to use "on" method bind the onclick event to button in jquery?
  on's Description: Attach an event handler function for one or more events to the selected elements.
  A basic usage of .on() is:
 

$("#xxx").on('click', function(){alert("xxx");});

  The above code will generate one alert when the button is clicked.
 
2.1.How to use "off" method disable the onclick event in jquery?
  off's Description: Remove an event handler.
  A basic usage of .off() is:
 

$("#xxx").off("click");

  This code will cause the element with an ID of xxx to removes the handlers regardless of type.
 
3.How to use "attr" method bind the onclick event to button in jquery?
  attr's Description: Get the value of an attribute for the first element in the set of matched elements.
  A basic usage of .attr() is:
 

$("#xxx").attr('onclick','alert("xxx");');

  This code will cause the element with an ID of xxx to respond to the click event. When a user clicks inside this element thereafter, the alert will be shown.

3.1.How to use "attr" method disable the onclick event in jquery?
  A basic usage of .attr() is:
 

$("#xxx").attr('onclick','');

  This code will clear the onclick method on the Button.

 
4.How to enable/disable "click" method to button in jquery?
  click's Description: Bind an event handler to the "click" JavaScript event, or trigger that event on an element.
  The click event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed and released. Any HTML element can receive this event.
  Enable example:
 

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

  Disable example:
 

$("#xxx").off('click');

  or
 

$("#xxx").unbind('click');

  5.How to call the onclick method in jquery?
  A basic usage of call the click method is:
 

$("#xxx").click();

  This code will call the click event on the ID of xxx button.

6.How to use javascript to set onclick event to button?
  The javascript code for bind the onclick method to button tag:
  

 <script>
    document.getElementById("xxx").onclick = function() {
        alert("xxx");
    }
</script>

6.1.How to call button click method in javascrpt?
    The javascript code for trigger the onclick event on button tag:
    

<script>
        document.getElementById("xxx").click();
</script>

6.2.How to use jquery delete onclick event in javascript?
  

 $("#xxx").attr('onclick','');

 

7.Demo for jquery button click

Demo:

Below is the source code:

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#jqueryClickButtonId").click(function(){
alert('I have a onclick method setting by jquery.');
});
$("#jqueryClickButtonId2").attr('onclick','alert("set by jquery attr method");');
$("#jqueryClickButtonId3").bind('click', function(){alert("set by jquery bind method");});
$("#jqueryClickButtonId4").on('click', function(){alert("set by jquery on method");});
});
function removeC(){
//this method  delete the onclick event 
//set by html code and set by jquery 'attr' attribute.
$("#htmlClickButtonId").attr('onclick','');
$("#jqueryClickButtonId2").attr('onclick','');
//delete javascript onclick event
$("#javascriptClickButtonId").attr('onclick','');
//below 2 method can delete onclick event set by jquery.
//$("#jqueryClickButtonId").off('click');
$("#jqueryClickButtonId").unbind('click');
//delete jquery bind click
$("#jqueryClickButtonId3").unbind("click");
//delete jquery on click
$("#jqueryClickButtonId4").off("click");
}
</script>
</head>
<body>
<input id="htmlClickButtonId" 
    type="button" value="onclick event set by html" 
    onclick="alert('I have a onclick method setting by html code.');"/>
<input id="javascriptClickButtonId" 
    type="button" 
    value="onclick event set by javascript"/>
<input id="jqueryClickButtonId" 
    type="button" 
    value="onclick event set by jquery 'click'"/>
<input id="jqueryClickButtonId2" 
    type="button" 
    value="onclick event set by jquery 'attr' atttribute"/>
<input id="jqueryClickButtonId3" 
    type="button" 
    value="onclick event set by jquery 'bind'"/>
<input id="jqueryClickButtonId4" 
    type="button" 
    value="onclick event set by jquery 'on'"/>
<br/>
<input id="removeid" 
    type="button" 
    value="Remove onclick event" onclick="removeC();"/>
</body>
<script>
document.getElementById("javascriptClickButtonId").onclick = function() {
    alert("This is a javascript click button.");
}
</script>
<html>

Related Articles
jquery disable button