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.
