jQuery Datepicker Binding to Dynamic Input – A Simple Solution

Author: Zeeshan Rasool  |  Last updated on Tutorials
jquery datepicker bind to dynamic element

jQuery datepicker plugin is one of the most popular and heavily used plugins in any simple to complex web projects. It gives the user ability to select date and time from the calendar UI it renders.

But we often face problem with binding the jquery date picker event to the HTML elements which have been dynamically added to the page.


Here is an example to show you the scenario. In below screenshot you can see we sometimes need to generate a field or even a form to the page dynamically.

jquery datepicker dynamic binding

In the above form, we have few fields like DOB and other which will have date picker control but the second box is generated with the Add More button, hence that block was not part of the page itself. And datepicker won’t work for the second fields.

Let’s have a look on typical datepicker initialize code.

The above piece of code won’t work for those dynamically generated input fields. Previously we had few options like .delegate() and .live() but those are deprecated as of jQuery v 1.7


But in jQuery 1.7, .on() method has been introduced which provides all functionality required for attaching event handlers. Below is the solution in the situation when we have binding the events problem to the newly initialized elements.

The above simple code will bind the datepicker control to all the available and upcoming elements on the page. You can use same on() function not only for the datepicker but where ever you need to bind any method to the dynamic elements.

Recommended WordPress Themes Store

If you enjoyed this post, please consider leaving a comment below or subscribing to the RSS feed to have future articles delivered to your feed reader. You can also follow us on Facebook or Twitter @99Points

This awesome post has been created by 99Points editor's team. You can follow our updates on Twitter and facebook, OR drop an email at 99points.info@gmail.com

Email Subscriber!

Be the first to know about new updates



Popular post