代码之家 › 专栏 › 技术社区 › stormdrain

在动态创建的输入上实例化datepicker

jquery-ui jquery javascript

stormdrain · 技术社区 · 15 年前

我正试图用日期选择器复制一个字段。字段重复,但日期选择器只显示在前两个字段上。。。我尝试过其他解决方法,例如添加 live 调用日期选择器但不执行的字段的侦听器。

var dc=0;
jQuery('#otherRecAdd').click(function(){
    dc++;
    var d=$('othrRecDates').innerHTML;
    var nd=document.createElement('div');
    nd.innerHTML=d;
    var divID='othrDate'+dc;
    nd.id=divID;
    jq(nd).attr('id','orInID'+dc);
    var ind=jq(nd).find('input');
    var indID='orDate'+dc;
    jq(ind).attr('id',indID)
    document.getElementById('otherReccuranceDiv').appendChild(nd);
    var x=jq("input[name=othrRdate]");//x.length increments correctly; it is finding all of the inputs
    x.datepicker();
})

//this doesn't work either
jq(function(){
    jq('input[name=othrRdate]').live('click', function() {
        jq(this).datepicker({showOn:'focus'}).focus();
    });
});

所以表单从一个输入开始,日期选择器工作正常。如果复制该输入,则复制的输入将正常工作。但是,在此之后,任何随后重复的输入都不能按预期工作。下面是生成的html:

<label for="otherRec">Other Reccurance</label></b>
<input name="otherRec" id="otherRec" onclick='toggleDiv("othrRecDates");' type="checkbox">
<div id="othrRecDates" style="">
    <b>Date:</b>
    <input class="hasDatepicker" name="othrRdate" id="date" type="text">
    <br>
</div>
<div id="orInID1">
    <b>Date:</b>
    <input class="hasDatepicker" name="othrRdate" id="orDate1" type="text">
    <br>
</div>
<div id="orInID2">
    <b>Date:</b>
    <input class="hasDatepicker" name="othrRdate" id="orDate2" type="text">
    <br>
</div>
<div id="orInID3">
    <b>Date:</b>
    <input class="hasDatepicker" name="othrRdate" id="orDate3" type="text">
    <br>
</div>

我刚意识到这对我也不起作用 name 属性必须是唯一的。我想更好的解决方案应该类似于上面的内容,但是选择类名而不是名称。

任何想法都会令人敬畏。

编辑:是的,我正在混合原型和jQuery:

2 回复 | 直到 15 年前

Nick Craver 15 年前

在jQuery中,您可以更简单地执行此操作,例如:

var dc=0;
jQuery('#otherRecAdd').click(function() {
    dc++;
    jQuery('#othrRecDates')           //get id="othrRecDates" as a jQuery object
      .clone()                        //make a copy
      .attr('id', 'othrDate'+dc)      //give it a new id
      .show()                         //show it, assuming the template is hidden
      .appendTo('#otherReccuranceDiv')//append it where it does in the DOM
      .find('input')                  //get the child <input>
      .attr('id', 'orDate'+dc)        //set it's ID, possible name here too
      .datepicker();                  //create a datepicker on it
});

这就创造了 .datepicker() 关于你的新 <input> 因为它是被创造出来的。 You can test it out here . 上面的内容是为了解释,但可以尽可能地压缩为可读的内容,如下所示:

var dc=0;
jQuery('#otherRecAdd').click(function() {
    dc++;
    jQuery('#othrRecDates').clone().attr('id', 'othrDate'+dc).show()
      .appendTo('#otherReccuranceDiv')
      .find('input').attr('id', 'orDate'+dc).datepicker();
});

John 15 年前

前几天它把我逼疯了!看起来jqueryui datepicker忽略了类为“hasDatepicker”的元素。分配一个新的唯一id并删除hasDatepicker类起到了神奇的作用。

if($(objParentTR).next().find('input')){ //spot the input field and iterate
  $(objParentTR).next().find('input').each(function(i, domEle){
  if($(domEle).hasClass("clsDatePicker")){
    $(domEle).attr('id', 'dyncal'+tID++).removeClass('hasDatepicker').datepicker();                         
   }
});
}