Jquery .datepicker() - 在动态表上

Question

我正在尝试创建一个动态表,每行包含两个日期字段.我正在使用Jquery datepicker.出于某种原因,只有第一行显示在日期选择器日历中.其他动态创建的字段未显示日历.我应该提一下,当加载此页面时,默认情况下第一行就位.仅从第二行开始动态创建.所有解决方案都说我应该重新初始化.datepicker().我做了,但它没有用.我尝试更改名称和ID仍然没有解决方案.这里有什么我想念的东西.以下是用于此目的的代码.

是的我知道在这个网站上有几个与此相关的问题.但有些我怎么找不到解决方案,因为他们不适合我.

使用Javascript:

$("#addurl").click(function(){
var idValue = "input[id='breachCount']";
var counter = $(idValue).val();
var trValue = $("#rowPH"+counter).html();
var countNew = parseInt(counter)+1;
$(idValue).val(countNew);
var newFile = "<tr id='rowPH"+countNew+"'>"+trValue+"</tr>";
$(newFile).insertBefore("#addLink");
var nameTemp, actNm;
var dcounter=0;
$('#rowPH'+countNew+' input').each(function(){
    nameTemp = $(this).attr("name");
    if(nameTemp){
        actNm = nameTemp.substring(nameTemp.indexOf("."));
  $(this).attr("name","breachList["+countNew+"]"+actNm+countNew);
    }
    });
$('.datepicker').each(function(i) {
            this.id = 'datepicker' + i;
    }).datepicker();                
});

HTML:

<table>.....
<tr id="rowPH0">
<td>
<input type="checkbox" checked="checked">
</td>
<td>
<input class="text_box_2 div_center" type="text" value="" name="breachList[0].breachText">
</td>
<td>
<input id="datepicker0" class="datepicker date_txt hasDatepicker" type="text" value="" name="breachList[0].activationDt"><img class="calendar" src="assets/images/calendar_icon.png">
</td>
<td>
   <input id="datepicker1" class="datepicker date_txt hasDatepicker" type="text" value=""  name="breachList[0].deactivationDt">
   <input type="checkbox" name="breachList[0].deactiveNa" checked="checked">
</td>
<td>
   <input class="text_box_2" type="text" value="" name="breachList[0].note">
</td>
</tr>
</tbody>
<tbody>
<tr id="rowPH1">
<td>
    <input type="checkbox" checked="checked">
</td>
<td>
    <input class="text_box_2 div_center" type="text" value="" name="breachList[1].breachText1">
</td>
<td>
  <input id="datepicker2" class="datepicker date_txt hasDatepicker" type="text" value="" name="breachList[1].activationDt1">
    <img class="calendar" src="assets/images/calendar_icon.png">
</td>
<td>
     <input id="datepicker3" class="datepicker date_txt hasDatepicker" type="text" value="" name="breachList[1].deactivationDt1">
    <input type="checkbox" name="breachList[1].deactiveNa1" checked="checked">
</td>
<td>
</tr>
<tr id="addLink">
    <td colspan="5" ><a href="javascript:void(0);" id="addurl">+ Add another row</a>
     <input type="hidden" id="breachCount" value="${fn:length(auditStandardBreachsForm.breachList)-1}"/>
</td></tr>
...</table>

Answer 1

无需为每个字段分配唯一ID.Datepicker可以唯一地识别每个.尝试将以下代码放入js中.

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

我已将它用于多个领域.

*更新*

我读了你的js代码,它搞砸了.你想要做的就是(根据你所说的)当用户点击Add Another Link时,你想在表中添加一个新行并希望它们能够使用jQuery datepicker.对？

上面代码不起作用的原因是,在这种情况下,文本字段是动态添加的.在datepciker初始化时onDocumentReady.因此,datepicker无法将自身附加到这些新创建的表单字段.解决方案是在创建新字段时附加datepicker.

这是我为你想要达到的目标而准备的工作模型.请参阅http://jsfiddle.net/phazorrise/bRE6q/上的演示