jQuery Datepicker does not work in dynamic element
12,983
Solution 1
The problem is that when you bind the event initially, the new field doesn't exist.
By applying the on click to the body, with the selector .input_date
, it should attach the event to the new element in the dynamic form.
$(function() {
$('body').on('click','.input_date', function() {
$(this).datepicker('destroy').datepicker({showOn:'focus'}).focus();
});
});
A better way:
You should initialize the datepicker for the field when you create the element.
$(function() {
$('.input_date').datepicker();
});
function createNewDatepickerInput() {
var $newInput = $('<input type="text" name="date123" class="input_date" />');
$newInput.appendTo("form").datepicker();
}
Solution 2
I don't understand why you're destroying/re-initializing the datepicker. You simply need to call .datepicker() after creating the element. For example:
function createInput() {
$('<input type="text" name="date" />').appendTo("form").datepicker();
}
Edit: Here's a demo: http://jsfiddle.net/xEmJu/
Related videos on Youtube
Author by
Subir
Updated on September 16, 2022Comments
-
Subir over 1 year
I have a problem. jQuery Datepicker does not work in a dynamic form, so you can't pick a date. Here is my demo link http://gestionale.odoyabooks.com/sum.php.
JavaScript:
<script> $(document).ready(function() { $('.input_date').on('click', function() { $(this).datepicker('destroy').datepicker({showOn:'focus'}).focus(); }); }); </script>
HTML:
<form action="" method="POST"> <div class="yes"> <div id="cost1" class="clonedCost" style="display: inline;"> <table border="0"> <tr> <td><label class="date" for="date">Date</label></td> </tr> <tr> <td><input class="input_date" id="date" type="text" name="date[]" /></td> </tr> </table> </div> <div id="addDelButtons_cost"><input type="button" id="btnAdd" value=""> <input type="button" id="btnDel" value=""></div> </div> </form>
-
Webberig over 10 yearsI think you're overcomplicating things. I don't see why you need to destroy it, re-initialize it and focus after clicking the input box...
-
Andy Fleming over 10 years@Webberig - I left the code inside unchanged. I just changed the event binding, since I believe that is where the problem is.
-
Webberig over 10 yearsI hereby mention that the OPs code + your answer is overcomplicating things. You just need to call datepicker() after creating the input field, not mess around like that on a click event...
-
Subir over 10 yearsDesignerGuy@ it does not work. shows an error like Uncaught TypeError: Cannot set property 'currentDay' of undefined
-
Andy Fleming over 10 years@user1652747 - The first or second way I describe above? Also, what version of jQuery are you using?
-
Subir over 10 yearsjQuery latest version
-
Subir over 10 yearsNo it does not work. shows again jquery ui Uncaught TypeError: Cannot set property 'currentDay' of undefined
-
Andy Fleming over 10 yearsI'm not seeing any error with either (using jQuery 2.0.2 and jQuery UI 1.10.3)
-
neshpro9 over 9 yearsThanks! works great for me! both in
Chrome
&FF
:)