Datepicker JQuery on JavaScript generated fields

Question

I'm adding a date picker to dynamically generated fields.

('#addScnt1').live('click', function() {
$('<p class="textocampodetexto" style="margin-left:20px; margin-top:20px;"> 
<label for="p_scnts1">  <input id="au_fechainicioperiodo2" 
name="au_fechainicioperiodo2" type="text" size="7"  
value="" /> </p>').appendTo(scntDiv);

Those fields are added when I click an 'Add Field' button.

The date picker doesn't appear when I click on the generated field. I know the datepicker is working because I put the code outside the javascript code and it works.

How can I achieve this then?

Please see this answer in order to help yourself with it. stackoverflow.com/questions/1396536/… — Garis M Suero
– Garis M Suero, Commented Apr 17, 2012 at 19:19

Community · Accepted Answer · 2017-05-23 11:49:03Z

2

You're going to have to reattach the datepicker to your input field.

Try the solution found here: Why does jQuery UI's datepicker break with a dynamic DOM?

The code isn't identical to yours but if you could extract the input field from your selector you could do it.

edited May 23, 2017 at 11:49

CommunityBot

11 silver badge

answered Apr 17, 2012 at 19:18

Gazillion

4,79211 gold badges45 silver badges59 bronze badges

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

Comments

Garis M Suero · Accepted Answer · 2012-04-17 19:33:51Z

1

Your code should work like this ( LIVE DEMO ):

$(function () 
{
  $('#addScnt1').click(function() {

    $('<p class="textocampodetexto" style="margin-left:20px; margin-top:20px;"><label for="p_scnts1">  <input id="au_fechainicioperiodo2" name="au_fechainicioperiodo2" type="text" size="7" value="" /> </p>').appendTo(scntDiv);
    $('#au_fechainicioperiodo2').datepicker(
    {
        showOn: "both",
        dateFormat: "dd M yy",
        firstDay: 1, 
        changeFirstDay: false
    });
  });
});

(NOTE: I'm supposing that the variable scntDiv is defined with an DOM object before this call)

edited Apr 17, 2012 at 19:33

answered Apr 17, 2012 at 19:26

Garis M Suero

8,1997 gold badges49 silver badges68 bronze badges

Comments

Robin Maben · Accepted Answer · 2012-04-17 19:18:41Z

0

$('#addScnt1').live('click', function() {
    var newElement = $('all your html'); //then append it wherever

    newElement.find('.input-selector').datepicker();
});

answered Apr 17, 2012 at 19:18

Robin Maben

23.3k16 gold badges70 silver badges99 bronze badges

Collectives™ on Stack Overflow

Datepicker JQuery on JavaScript generated fields

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related