Click here to Skip to main content
12,305,299 members (72,354 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

8K views
77 downloads
6 bookmarked
Posted

Dynamic Events Binding in jQuery

, 26 Sep 2015 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

http://www.amazon.com/author/peterleow

You may also be interested in...

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.160530.1 | Last Updated 27 Sep 2015
Article Copyright 2014 by Peter Leow
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid