Datetimepicker does not call / bind properly after deleting dynamic input field

Question

I am using jquery datetimepicker with the next version

JQuery v1.7.2 JQuery UI - v1.10.3 jQuery timepicker addon V1.3 

In the module, I dynamically create an input field by clicking "+" , and also linking the datetimepicker to those inputs that are created dynamically, and also deletes this input field by clicking "-".

My dynamic input fields are always created as shown below:

 datepickerfrom_1_1 datepickerfrom_1_2 datepickerfrom_1_3 datepickerfrom_1_4 datepickerfrom_1_5 . . . 

I am binding a datetimepicker using jQuery as shown below:

 $(window).load(function() { $('body').on('focus', 'input[id^="datepickerfrom"]', function() { // Id Containing "datepickerfrom" string, bind the datetimepicker $(this).datetimepicker({ dateFormat: 'yy-mm-dd', timeFormat: 'HH:mm:ss' }); }); }); 

script(datetimepicker) works fine when creating dynamic input.

Question: I add a dynamic input field by clicking "+" , then I removed some of the inputs by clicking "-" , again I add some dynamic input fields. The second time created an input field that does not call / bind datetimepicker properly.

What could be the problem? How can I solve it?

Answer 1

I just tried this in jsfiddle and it worked, here is the link: http://jsfiddle.net/juTRR/

If you know your problem, reproduce it in jsfiddle so that we can see what it is because I do not see it. Perhaps try using $(document).ready instead of $(window).load , this is the only thing I changed. Or maybe the problem is that you are adding and removing functions, if so, you should put them in your post.

Answer 2

I think the problem is the jquery context in the 'on' function. In jquery.on function you use $ (this). $ (this) will refer to your primary selector: $ ('body').

You tried:

 $('input[id^="datepickerfrom"]').on('focus', function() { 

Examples shows that you need an input field. Therefore, I assume that $ ('input [id ^ = "datepickerfrom"]') is your input field.