Bind click event with .on() method in jQuery

Description

The following code shows how to bind click event with .on() method.

Example


<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){<!--from w  ww.j a v a  2  s. c  o  m-->
$("#aDiv").on('click', function(){
document.writeln("Handler 1");
});

$("#aDiv").on('click', function(){
document.writeln("Handler 2");
});
});
</script>
</head>
<body>
<div id="aDiv" class="boxDiv">Press Me java2s.com
</div>
</body>
</html>

Click to view the demo

The code above generates the following result.

Bind click event with .on() method in jQuery

Home »
  Javascript Tutorial »
    jQuery »
      jQuery Event

...
Add and remove class in click event handler...
Add different class by different height in ...
Add hover action to b element in jQuery
Add letters to a paragraph as you type in j...
Bind a handler independent of whether the D...
Bind click event for all div elements in jQ...
Bind click event once in jQuery

Bind click event with .on() method in jQuer...

Bind double click event for paragraph in jQ...
Bind double click event to header in jQuery
Bind events to generic elements in jQuery
Bind for future added element in jQuery
Bind future target element with event handl...
Bind mouse enter/leave event to handler in ...
Bind the click event with event handler in ...
Bind the same action twice in jQuery
Block user from typing into the text box in...
Cancel future event in jQuery
Cancel jQuery event in jQuery
Change style for mouse over event in jQuery
Change the font weight and color of all Ita...
Convert key code to char in keypress event ...
Execute an event only once in jQuery
Fire focus event and add style to the nearb...
Get event in page in jQuery
Get event target and work on it in jQuery
Get the event location in jQuery
Get the keycode from event from keydown eve...
Handle a click event and displays the tag n...
Handle anchor click event in jQuery
Handle click event once in jQuery
Handle click event to links in unordered li...
Handle form select change event in jQuery
Handle input text element key type event in...
Handle the first time click event on div ta...
Handler div element mouse hover event in jQ...
Hover to fade in and out in jQuery
Hover to hide tag in jQuery
...