ruby on rails - How to get jQuery UI datepicker to work correctly in a form that's loaded via ajax request -

i have calendar page , each day, have link loads form via ajax bootstrap popover. in ajax form, have start date field , end date field. after loading form , creating , showing popover, i'm using jquery add datepicker each of date fields via jquery:

$( ".datepicker" ).datepicker({ changemonth: true, changeyear: true, dateformat: "mm/dd/yy" }); //add datepicker 

it's binding datepicker fields because when click on either of these fields, datepicker appears.

however, when select date, i'm getting following error in console:

[error] typeerror: 'undefined' not object (evaluating '= inst.currentday = $("a", td).html()') _selectday (jquery.ui.datepicker.js, line 977) selectday (jquery.ui.datepicker.js, line 1568) dispatch (jquery.js, line 5096) handle (jquery.js, line 4767) 

i've been reading lot this, , seems because input field i'm binding datepicker loaded part of ajax request after dom loaded. makes sense, because use exact same method bind datepicker on other pages, on other pages form elements i'm attaching datepicker part of initial page load. in pages, works fine.

so, correct i'm getting problem because form input loaded asynchronously? , if so, can use datepicker on form elements loaded in manner?

update

here details on how i'm doing presently. per @mandeep, i'm doing rails way. here code (new.js.erb) builds popover , subsequently adds datepicker:

$('#newevent').empty(); //empty previous popover content container $('#<%= @event.start.to_date.strftime("%y-%m-%d") %>').find('a.new-event-link').popover('destroy'); //destroy popover bound link $('#<%= @event.start.to_date.strftime("%y-%m-%d") %>').find('a.new-event-link').popover({      trigger:'manual', placement: 'left', html:true, title:'new event', content:'<%= j render("new_popover") %>', container:"#newevent" }); //create popover , render _new_popover.html.erb in contents. form dates $('#<%= @event.start.to_date.strftime("%y-%m-%d") %>').find('a.new-event-link').popover('show'); //show popover $( ".datepicker" ).datepicker({ changemonth: true, changeyear: true, dateformat: "mm/dd/yy" }); //add datepicker $('#cancelevent').click(function(){     $('#<%= @event.start.to_date.strftime("%y-%m-%d") %>').find('a.new-event-link').popover('hide'); }); //hide popover on clicking cancel 

as mentioned, works correctly 1) create popover , render form in it, , 2) attach datepicker. problem comes on selecting date. that's when error.

i suggest putting datepicker assignment inside html getting ajax call. that's how , works me. know it's little bit messier, adding:

<script type="text/javascript">     $( ".datepicker" ).datepicker({ changemonth: true, changeyear: true, dateformat: "mm/dd/yy" }); //add datepicker </script> 

to end of html you're retrieving should trick. it's possible tacking on returned data in javascript side of things (before adding content webpage) might work too, i've not tried that.

let me know if struggle , i'll provide code samples.