putting datepicker on dynamically created elements jquery jqueryui

putting datepicker on dynamically created elements jquery jqueryui  using -'javascript,jquery,jquery-ui,datepicker'

I have dynamically created textboxes, and I want each of them to be able to display a calendar on click. The code I am using is:

$(".datepicker_recurring_start" ).datepicker();

Which will only work on the first textbox, even though all my textboxes have a class called datepicker_recurring_start.

Your help is much appreciated!

asked Oct 6, 2015 by loknath.ganji
0 votes

3 Answers

0 votes

here is the trick:

$('body').on('focus',".datepicker_recurring_start", function(){


The $('...selector..').on('..event..', '...another-selector...', ...callback...); syntax means:
Add a listener to ...selector.. (the body in our example) for the event ..event.. ('focus' in our example). For all the descendants of the matching nodes that matches the selector ...another-selector... (.datepicker_recurring_start in our example) , apply the event handler ...callback... (the inline function in our example)

See http://api.jquery.com/on/ and especially the section about "delegated events"

answered Oct 6, 2015 by vijaygupta1980
0 votes

For me below jquery worked:

changing "body" to document

$(document).on('focus',".datepicker_recurring_start", function(){

Thanks to skafandri

Note: make sure your id is different for each field

answered Oct 6, 2015 by 20shahi
0 votes

You need to run the .datepicker(); again after you've dynamically created the other textbox elements.

I would recommend doing so in the callback method of the call that is adding the elements to the DOM.

So lets say you're using the JQuery Load method to pull the elements from a source and load them into the DOM, you would do something like this:

$('#id_of_div_youre_dynamically_adding_to').load('ajax/get_textbox', function() {
  $(".datepicker_recurring_start" ).datepicker();
answered Oct 6, 2015 by ashishshukla