javascript - jquery datepicker not working for cloned elements - Stack Overflow

admin管理员组

文章数量:1332872

I have a jquery date picker field which I am cloning when a user clicks on an Add button. I want the date picker to appear for the subsequently added fields on the screen. Right now the datepicker is appearing only for the first field and not for the added/cloned fields.

After checking a lot of posts on similar topic here, I was able to reach at this stage. Below is my code so far.

<div class="repeatingSection">
<a href="#" class="deleteDate" style="display: none;">-Delete</a>
<input type="text" class="dateListValues" style="position: relative; z-index:100000;" 
       id="dateListValues_1" size="15" />
</div>
<a href="#" class="addDate">+ Add</a>

JS:

// Add a new repeating section
$('.addDate').click(function(){
    var currentCount =  $('.repeatingSection').length;
    var newCount = currentCount+1;
    var newID;
    var lastRepeatingGroup = $('.repeatingSection').last();
    var newSection = lastRepeatingGroup.clone();
    newSection.insertAfter(lastRepeatingGroup);
    newSection.find("input").each(function (index, input) {
        input.id = input.id.replace("_" + currentCount, "_" + newCount);
        input.name = input.name.replace("_" + currentCount, "_" + newCount);
        input.value = "";
            //removing the additional hasDatepicker class 
        $('#'+input.id).removeClass('hasDatepicker');
    });

    return false;
});

   $('.dateListValues').each(function(){
    $(this).datepicker();
   });

Thanks.

I have a jquery date picker field which I am cloning when a user clicks on an Add button. I want the date picker to appear for the subsequently added fields on the screen. Right now the datepicker is appearing only for the first field and not for the added/cloned fields.

After checking a lot of posts on similar topic here, I was able to reach at this stage. Below is my code so far.

<div class="repeatingSection">
<a href="#" class="deleteDate" style="display: none;">-Delete</a>
<input type="text" class="dateListValues" style="position: relative; z-index:100000;" 
       id="dateListValues_1" size="15" />
</div>
<a href="#" class="addDate">+ Add</a>

JS:

// Add a new repeating section
$('.addDate').click(function(){
    var currentCount =  $('.repeatingSection').length;
    var newCount = currentCount+1;
    var newID;
    var lastRepeatingGroup = $('.repeatingSection').last();
    var newSection = lastRepeatingGroup.clone();
    newSection.insertAfter(lastRepeatingGroup);
    newSection.find("input").each(function (index, input) {
        input.id = input.id.replace("_" + currentCount, "_" + newCount);
        input.name = input.name.replace("_" + currentCount, "_" + newCount);
        input.value = "";
            //removing the additional hasDatepicker class 
        $('#'+input.id).removeClass('hasDatepicker');
    });

    return false;
});

   $('.dateListValues').each(function(){
    $(this).datepicker();
   });

Thanks.

• javascript
• jquery
• jquery-ui-datepicker

Share Improve this question Follow asked Dec 14, 2012 at 10:01 DarkKnightFanDarkKnightFan 1,9531414 gold badges4242 silver badges6161 bronze badges 2

• Why are you removing hasDatepicker class? – A. Wolff Commented Dec 14, 2012 at 10:04
• well earlier I was not removing it. But read it here stackoverflow./questions/5788999/… .. so tried doing that also – DarkKnightFan Commented Dec 14, 2012 at 10:05

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You need to initialise the datepicker plugin on the newly created element. Try adding this line right before your return false;:

newSection.find(".dateListValues").datepicker();

initailize date picker inside the click function..

$('.addDate').click(function(){
var currentCount =  $('.repeatingSection').length;
var newCount = currentCount+1;
var newID;
var lastRepeatingGroup = $('.repeatingSection').last();
var newSection = lastRepeatingGroup.clone();
newSection.insertAfter(lastRepeatingGroup);
newSection.find("input").each(function (index, input) {
    input.id = input.id.replace("_" + currentCount, "_" + newCount);
    input.name = input.name.replace("_" + currentCount, "_" + newCount);
    input.value = "";
        //removing the additional hasDatepicker class 
    $('#'+input.id).removeClass('hasDatepicker');

});
  newSection.find(".dateListValues").datepicker(); //here
  return false;
});

本文标签： javascriptjquery datepicker not working for cloned elementsStack Overflow