Bind click action to button in jQuery

Description

The following code shows how to bind click action to button.

Example


<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
a.test { font-weight: bold; color:red;}
</style><!-- w w w  .  j  a v a  2 s  .  co  m-->
<script type="text/javascript">
$(document).ready(function(){
$("input.buttonA").click(function(){
$("div.contentToChange").find("p.firstparagraph:hidden").slideDown("slow");
});
$("input.buttonB").click(function(){
$("div.contentToChange").find("p.firstparagraph:visible").slideUp("slow");
});
});
</script>
</head>
<body>
<input type="button" value="Slide In" class="buttonA" />
<input type="button" value="Slide Out" class="buttonB" />
<div style="background:#eee;" class="contentToChange">
<h2>Header 2</h2>
<p class="firstparagraph">Lorem ipsum <em>dolor</em> sit amet, consectetuer <em>adipiscing</em> elit, sed diam nonummy nibh euismod <em>tincidunt</em> ut laoreet dolore magna aliquam erat <strong>volutpat</strong>. Ut wisi enim ad minim <em>veniam</em>, quis nostrud exerci <strong>tation</strong> ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

<p class="secondparagraph">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse <strong>molestie</strong> consequat, vel illum <strong>dolore</strong> eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer <strong>adipiscing</strong> elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p class="thirdparagraph">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea <em>commodo</em> consequat. Duis autem vel eum iriure dolor in hendrerit in <em>vulputate</em> velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te <strong>feugait</strong> nulla facilisi.</p>

<p class="fourthparagraph">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, <strong>quis</strong> nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<p class="fifthparagraph">Lorem ipsum <em>dolor</em> sit amet, consectetuer <em>adipiscing</em> elit, sed diam nonummy nibh euismod <em>tincidunt</em> ut laoreet dolore magna aliquam erat <strong>volutpat</strong>. Ut wisi enim ad minim <em>veniam</em>, quis nostrud exerci <strong>tation</strong> ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

<p class="sixthparagraph">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse <strong>molestie</strong> consequat, vel illum <strong>dolore</strong> eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer <strong>adipiscing</strong> elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

</div>

</body>
</html>

Click to view the demo

The code above generates the following result.

Home »
  Javascript Tutorial »
    jQuery »
      jQuery Form

...
Add action to button with ID in jQuery
Bind and unbind events to the button in jQu...

Bind click action to button in jQuery

Cancel submit event by returning false in j...
Change form text field color and value in j...
Change text color for input element in jQue...
Change the button text with replaceWith met...
Check the check box in jQuery
Click the button to enable the input next t...
Create a button clone and insert it after t...
Disable buttons whose index is greater than...
Fire focus event in jQuery
Get input text from Text Box in jQuery
Get multiple selected value in jQuery
Get selected items from form select control...
Get single selected value from select in jQ...
Get text from button and set the value to i...
Get text value from a button and set it to ...
Get the input value of the first matched se...
Get value for each form element in jQuery
Handle focus event fired when an element re...
Handle form input Text box selected event i...
Handle form input Text input change event i...
Handle form inut key up event in jQuery
Hide all the input elements within a form i...
Invoke Submit Event in jQuery
Make a form input text element editable and...
Pre-select multiple select option in jQuery
Pre-select options in form select element i...
Preselect checkbox in jQuery
Preset form radio button in jQuery
Select all selected items from form select ...
Select checkbox from a list of form control...
Select checked checkbox in jQuery
Select disabled button and get the its next...
Select form button and check element list l...
Select form file input field in jQuery
Select form image control in jQuery
...