How are you guys? Many friends asks me what is the use of jQuery on() method, where and when can we use it and why is it important. So in this tutorial, I'm going to give you two example situations where we can use the jQuery on() method.
 |
| Loading and submitting a from without page refresh. Click to enlarge. |
By definition, jQuery on() method attaches an event handler function (click, submit, etc.) to one or more elements (div, p, etc.). In my experience, I used jQuery on() when:
- I want to load a new HTML form on a DIV and submit it without page refresh.
- I want to reload a list of records and use the actions like 'Delete'.
By the way, you can download all the codes used in this post:
Loading Different Forms to a DIV
This code can load the 'Add User' and 'Add Role' form to the 'formContainer' DIV (one at a time). Our goal is to submit the form without page refresh. To achieve that we are going to use the on() method. See the live demo:
form_w_on.php code:
<html>
<head>
<title>jQuery On() Tutorial - submit with on()</title>
<style>
#addNewUser, #addNewRole{
cursor:pointer;
float:left;
text-decoration:underline;
}
#formContainer{
border:thin solid #000;
padding:0.5em;
margin:1em 0 0 0;
}
.clearBoth{
clear:both;
}
</style>
</head>
<body>
<divid='addNewUser'>[+ New User]</div>
<divid='addNewRole'>[+ New Roles]</div>
<divclass='clearBoth'></div>
<divid='formContainer'>
<!--here is where the form will be loaded -->
</div>
<scriptsrc='js/jquery-1.9.1.min.js'></script>
<script>
$(document).ready(function(){
// when user clicks '[+ New User]', it will load the add_user.php file
$('#addNewUser').click(function(){
$('#formContainer').load('add_user.php', function(){
console.log('user form loaded!');
});
});
// when user clicks '[+ New Roles]', it will load the add_role.php file
$('#addNewRole').click(function(){
$('#formContainer').load('add_role.php', function(){
console.log('role form loaded!');
});
});
// when the user submits the 'add new user' form
$(document).on('submit', '#addUserForm', function(){
alert('Add new user form is submitted!');
returnfalse;
});
// when the user submits the 'add new role' form
$(document).on('submit', '#addRoleForm', function(){
alert('Add new role form is submitted!');
returnfalse;
});
});
</script>
</body>
</html>
add_user.php code:
<formid='addUserForm'>
<div>Firstname: <inputtype='text'name='firstname' /></div>
<div>Lastname: <inputtype='text'name='lastname' /></div>
<div><inputtype='submit'value='Save' /></div>
</form>
add_role.php code:
<formid='addRoleForm'>
<div>User Role: <inputtype='text'name='role' /></div>
<div>Description: <inputtype='text'name='description' /></div>
<div><inputtype='submit'value='Save' /></div>
</form>
Without the on() method, jQuery code usually looks like this (form_w_out_on.php):
<script>
$(document).ready(function(){
// when user clicks '[+ New User]', it will load the add_user.php file
$('#addNewUser').click(function(){
$('#formContainer').load('add_user.php', function(){
console.log('user form loaded!');
});
});
// when user clicks '[+ New Roles]', it will load the add_role.php file
$('#addNewRole').click(function(){
$('#formContainer').load('add_role.php', function(){
console.log('role form loaded!');
});
});
// when the user submits the 'add new user' form
$('#addUserForm').submit(function() {
alert('Add user form is submitted!');
returnfalse;
});
// when the user submits the 'add new role' form
$('#addRoleForm').submit(function() {
alert('Add new role form is submitted!');
returnfalse;
});
});
</script>
Here's a live demo without using the on() method, it reloads the whole page.
![load and submit form without on() - jQuery On() Tutorial - live demo]( "load and submit form without on() - jQuery On() Tutorial - live demo")
Loading Table List to a DIV
In this example, when the user clicks on the "[Load List]" text, it will load a table list of data (list.php) with a 'Delete' action right across each records.
index.php code:
<html>
<head>
<title>jQuery on() tutorial - loading lists</title>
<style>
#myTable{
float:left;
margin:1em 0 0 0;
}
#myTableth,
#myTabletd{
border:thin solid #000;
padding:1em;
}
.deleteAction{
cursor:pointer;
}
#loadAction{
cursor:pointer;
text-decoration:underline;
}
</style>
</head>
<body>
<divid='loadAction'>[Load List]</div>
<divid='listContainer'>
<!--here is where the form will be loaded -->
</div>
<scriptsrc='js/jquery-1.9.1.min.js'></script>
<script>
$(document).ready(function(){
$('#loadAction').click(function(){
$('#listContainer').load('list.php', function(){
console.log('list loaded!');
});
});
/*
// using this code won't pop up 'Are you sure?'
$('.deleteAction').click(function(){
if(confirm('Are you sure?'){
// do things if ok}
});
*/
$(document).on('click', '.deleteAction', function(){
if(confirm('Are you sure?')){
// do things if ok
}
});
});
</script>
</body>
</html>
Similarly, as indicated in the code comments, 'Are you sure?' alert dialog won't be shown without the help of the jQuery on() method.
list.php - the data to be loaded in the listContainer div.
<tableid='myTable'>
<tr>
<th>Name</th>
<th>Action</th>
</tr>
<tr>
<td>Mike Dalisay</td>
<td>
<divclass='deleteAction'>Delete</div>
</td>
</tr>
<tr>
<td>Marykris De Leon</td>
<td>
<divclass='deleteAction'>Delete</div>
</td>
</tr>
</table>
There are other previously used methods almost similar the jQuery on(), like live() and delegate(). But among those methods, jQuery on() is recommended to use (if you're using jQuery 1.7+). Users of older versions of jQuery should use delegate() in preference to live().