Jquery DatePicker doesn`t work when adding InnerHTML

Question

I have a date picker and when I add the datepicker using innerHTML, it doesn't work.

while (currentMovedAmount < movedAmount)
{
    currentMovedAmount++;
    movedInContainer.innerHTML += extraAddresses.innerHTML;
    movedInContainer.innerHTML += '<hr>';
    $(".datepicker").datepicker();
}

This is the html that is being added. i have read in places just to re-assign the datepicker but still no luck, i tried to add an event on focus as well but still doesn't work.

<p>Postcode: <INPUT name="postCode"  id="postCode"  type="text" placeholder="Enter Postcode"></p>   
<p>Date Moved In <INPUT name="dateMovedIn" id="dateMovedIn1"  type="text" class="datepicker"></p>

Update Mistake on spelling datepicker i can get it working if i assign the to the id, however if the ids are the same will this stop the datepicker working from class?

Soultion Don't use the class ".datepicker"

Which datepicker plugin are you using? Can you create a JSFiddle? — Just a student
– Just a student, Commented Jul 29, 2016 at 10:36
could be due to class name typo, in html it is 'datepicker' but in js it is 'datepick'? — Gopinath Shiva
– Gopinath Shiva, Commented Jul 29, 2016 at 10:42
Hope you dont call javascript code before drawing the input. — Cracker
– Cracker, Commented Jul 29, 2016 at 13:45

Gopinath Shiva · Accepted Answer · 2016-07-29 10:49:10Z

2

I believe this could be due to class name typo, in html you declared class as 'datepicker' but in js you called as 'datepick'?

//js
$( function() {
    $("#datepicker" ).datepicker();
    $('#dynamic').html('Date: <input type="text" class="datepicker">');
    $(".datepicker" ).datepicker();
});

//html
<p>Date: <input type="text" id="datepicker"></p>
<p id='dynamic'></p>

Find the below fiddle solution for reference - created using static and dynamic addition of html both work without any flaw.

http://jsfiddle.net/b68Xb/2621/

answered Jul 29, 2016 at 10:49

Gopinath Shiva

3,8905 gold badges30 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Jquery DatePicker doesn`t work when adding InnerHTML

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related