Javascript 动态表上的Jquery.datepicker（）

我试图创建一个动态表，每行包含两个日期字段。我正在使用Jquery日期选择器。由于某些原因，日期选择器日历中只显示第一行。其他动态创建的字段不显示日历。我应该提到的是，在加载此页面时，默认情况下第一行已就位。仅从第二行动态创建。所有的解决方案都说我应该重新初始化.datepicker（）。我做了，但它不起作用。我试着改变名字和身份证，但仍然没有解决办法。这里有我遗漏的东西吗。以下是用于此目的的代码

是的，我知道在这个网站上有几个与此相关的问题。但有些人认为我找不到解决办法，因为他们不为我工作

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();                
});

$（“#添加URL”）。单击（函数（）{
var idValue=“输入[id='breakcount']”；
变量计数器=$（idValue）.val（）；
var trValue=$（“#rowPH”+counter）.html（）；
var countNew=parseInt（计数器）+1；
$（idValue）.val（countNew）；
var newFile=“”+trValue+”；
$（newFile）.insertBefore（#addLink”）；
变量名称温度，actNm；
var-dcounter=0；
$（'#rowPH'+countNew+'input'）。每个（函数（）{
nameTemp=$（this.attr（“name”）；
如果（nameTemp）{
actNm=名称温度子字符串（名称温度索引（“.”）；
$（this.attr（“name”，“breaklist[”+countNew+“]””+actNm+countNew）；
}
});
$（'.datepicker'）。每个（函数（i）{
this.id='datepicker'+i；
}).datepicker（）；
});

Html:

。。。。。
...

无需为每个字段分配唯一ID。日期选择器可以唯一地标识每个日期。尝试将以下代码放入js中

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

我已经在多个领域使用过它

*更新*

我读了你的js代码，结果搞砸了。您所要做的就是（根据您所说的），当用户单击“添加另一个链接”时，您希望在表中添加一个新行，并希望他们能够使用jQuery datepicker。对吧?

上述代码不起作用的原因是，在本例中，文本字段被动态添加。而

datepciker

在

onDocumentReady

上初始化。因此，datepicker无法将自身附加到这些新创建的表单字段。解决方案是在创建新字段时附加datepicker

---

这是我为您想要实现的目标准备的工作模型。请参见上的演示，无需为每个字段分配唯一ID。日期选择器可以唯一地标识每个日期。尝试将以下代码放入js中

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

我已经在多个领域使用过它

*更新*

我读了你的js代码，结果搞砸了。您所要做的就是（根据您所说的），当用户单击“添加另一个链接”时，您希望在表中添加一个新行，并希望他们能够使用jQuery datepicker。对吧?

上述代码不起作用的原因是，在本例中，文本字段被动态添加。而

datepciker

在

onDocumentReady

上初始化。因此，datepicker无法将自身附加到这些新创建的表单字段。解决方案是在创建新字段时附加datepicker

---

这是我为您想要实现的目标准备的工作模型。请参见

上的演示，这是我的更新代码

Javascript 在上述javascript的底部进行了修改

var nameTemp, actNm;
$('#rowPH'+countNew+' input').each(function(){
    nameTemp = $(this).attr("name");
    if(nameTemp){
      actNm = nameTemp.substring(nameTemp.indexOf("."));
      $(this).attr("name","breachList["+countNew+"]"+actNm);
      $(this).attr("id","breachList["+countNew+"]"+actNm+countNew); //added 
    }
});
$('.datepicker').each(function(i) {
    $(this).removeClass('hasDatepicker').datepicker(); //changed ref: phazor comment
 });

---

这是我的更新代码

Javascript 在上述javascript的底部进行了修改

var nameTemp, actNm;
$('#rowPH'+countNew+' input').each(function(){
    nameTemp = $(this).attr("name");
    if(nameTemp){
      actNm = nameTemp.substring(nameTemp.indexOf("."));
      $(this).attr("name","breachList["+countNew+"]"+actNm);
      $(this).attr("id","breachList["+countNew+"]"+actNm+countNew); //added 
    }
});
$('.datepicker').each(function(i) {
    $(this).removeClass('hasDatepicker').datepicker(); //changed ref: phazor comment
 });

---

你有一些CSS可能会破坏布局吗？我不这么认为，布莱恩。我目前正在为日期选择器使用“jqueryui custom.css”，页面中没有其他css覆盖它们。然后，日期选择器再次为第一行以及我单独使用它们的其他位置工作。动态初始化日期选择器似乎有问题。i、 e正在调用.datepicker（）。它似乎没有初始化。你有一些CSS，可能会抛出布局？我不这么认为，布赖恩。我目前正在为日期选择器使用“jqueryui custom.css”，页面中没有其他css覆盖它们。然后，日期选择器再次为第一行以及我单独使用它们的其他位置工作。动态初始化日期选择器似乎有问题。i、 e正在调用.datepicker（）。它似乎没有初始化。我已经试过了。它不起作用。。。除此之外，代码中是否存在任何循环漏洞。@我已经更新了答案并给出了演示。看看它是否对您有帮助。我应该说是brilliant并感谢您提供的行

$（this）.removeClass（'hasDatepicker'）.datepicker（）。我不能接受我的JS是一团糟的：）。这是一种需要，需要你称之为混乱的东西。我用的是我提到的同样的JS和you行。它就像一个符咒。我还应该提到的是，这个日期选择器在某些场景中也需要一个不同的id，就像我一样。如果id不相同，则日期在我选择的位置，仅加载在一个输入字段中，而不是相应的元素上。再次感谢你花了这么多时间。再一次。。。太棒了。我给你打个勾。@Har Datepicker插件自动分配unqiue ID。如果你检查文本字段，你会发现使用timestamp.hmm已经设置了唯一id。是的，我已经看到了，但是在我的例子中，我正在克隆带有timestamp id datepicjker元素的html。所以所有的行都有相同的id，不是吗？这就是发生的事情……我试过了。它不起作用。。。除此之外，代码中是否存在任何循环漏洞。@我已经更新了答案并给出了演示。看看它是否对您有帮助。我应该说是brilliant并感谢您提供的行
$（this）.removeClass（'hasDatepicker'）.datepicker（）。我不能接受我的JS是一团糟的：）。这是一种需要，需要你称之为混乱的东西。我用的是我提到的同样的JS和you行。它就像一个符咒。我还应该提到的是，这个约会选择者也需要一个dif