Click here to Skip to main content
Click here to Skip to main content

Dynamic Events Binding in jQuery

, 26 Mar 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
Learn to bind events on jQuery selectors that are created on the fly.

Introduction

Prior to version 1.9, the live() method was being used to attach event handlers to jQuery selectors. But it has since being deprecated in jQuery 1.7 and replaced with the on() method.

Using on() method, t is pretty straight forward to attach event handlers to any jQuery selectors that are static and known at design time. However, I have encountered requirements that call for binding events handlers to selectors that are created on the fly programmatically. How can this be achieved?

Using the code

Static Selector

In the following code, the on method() binds a function to the change event of the selector which is a file upload button whose class name is myfile. When invoked, the code in the function will add another file upload button after the current one.

static.html

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function () {
   $('.myfile').on(
      'change', function () {
          $(this).after('<input type="file" class="myfile" />'); 
   }); 
});
</script>
</head>
<body>
<input type="file" class="myfile" />
</body>
</html>  

Save the code to a HTML file and launch it in a browser. You should see an file upload button and when you select a file, it will create another file upload button. If you select another file from the initial file upload button, it will again create another file upload button. This is to be expected as it has been bound to the change event.

However, the same effect will not happen when you click on those file upload buttons that are created on the fly as the change event is not bound to them.

Dynamic Selector

Here come the new requirement to bind the same change event to any file upload buttons that are created on the fly. In another words, the change event cannot be just bound to a single selector which is the initial file upload button, it now has to attach to a group of selectors. Yes, place them in a container and attach the change event to any child selectors in it. Here come the solution that meets the new requirement.

dynamic.html

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function () {
   $('.mydiv').on(
      'change', '.myfile', function () {
          $(this).after('<input type="file" class="myfile" />'); 
   }); 
});
</script>
</head>
<body>
<div class="mydiv">
   <input type="file" class="myfile" />
</div>
</body>
</html> 

The myfile file upload button is now being wrapped in the mydiv container. The change event is not being bound to this selector through the container. Any subsequent file upload button created by this change event is added to this container and automatically be bound to this same event.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Peter Leow
Instructor / Trainer
Singapore Singapore
子曰:"三人行,必有我师焉;择其善者而从之,其不善者而改之

"There is always something we can learn from another person. Choose to follow his strengths while use his shortcomings to reflect upon ourselves."
― Confucius

“Live as if you were to die tomorrow. Learn as if you were to live forever.”
― Mahatma Gandhi
Follow on   LinkedIn

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150331.1 | Last Updated 26 Mar 2014
Article Copyright 2014 by Peter Leow
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid