0

这是我的代码

 $(function() {
    $( ".datepicker" ).datepicker();
    });

此代码正在生成额外的文本字段：

<script type="text/javascript">
   var counter = 0;
function add_user1(FieldName) {
counter++;
var newFields = document.getElementById(FieldName).cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter;
}
var insertHere = document.getElementById(FieldName);
insertHere.parentNode.insertBefore(newFields,insertHere);
}
</script>

但这部分html工作完美，但是当我单击添加更多字段时，日期选择器不起作用。

                **<label id="l" style="width:120px;">Employment History:</label>
                <br class="clear"/>
                <label id="l" style="width:80px;">Role:</label>
                <input id="l" type="text" size="37" onblur="" value="" style="width:auto;" name="user_role[]"/>
                <br class="clear"/>
                <label id="l" style="width:80px;">Company:</label>
                <input id="l" type="text" size="37" onblur="" value="" style="width:auto;" name="user_com[]"/>
                <br class="clear"/>
                <label id="l" style="width:80px;">From:</label>
                <input class="datepicker"  type="text" size="37" onblur="" value="" style="width:auto;" name="user_from[]"/>
                <br class="clear"/>
                <label id="l" style="width:80px;">To:</label>
                <input class="datepicker"  type="text" size="37" onblur="" value="" style="width:auto;" name="user_to[]"/>
                <br class="clear"/>**

它正在查看 jquery 日历，但是当我把它放在这个特定的 div 中时，日期选择器不起作用

                **<div id="add_user1" style="display: none;" >**
<label id="l" style="width:80px;">Role:</label><input id="l" type="text" size="37" style="width:auto;" name="user_role[]" value="" /><br class="clear"/>
<label id="l" style="width:80px;">Company:</label><input id="l" type="text" size="37" style="width:auto;" name="user_com[]" value="" /><br class="clear"/>
<label id="l" style="width:80px;">From:</label><input class="datepicker" type="text" size="37" onblur="" value="" style="width:auto;" name="user_from[]" /><br class="clear"/>
<label id="l" style="width:80px;">To:</label><input class="datepicker"  type="text" size="37" onblur="" value="" style="width:auto;" name="user_to[]"/><br class="clear"/></div>
<input type="button" id="add_user1()" onclick="add_user1('add_user1')" name="btn" value="Add More!" /><br>
                <br class="clear"/>
               <!---------Dyanmic Fields ---------->
4

1 回答 1

1

您应该只需要.datepicker();在创建新字段后调用它们。

var counter = 0;
function add_user(FieldName) {
  counter++;
  var newFields = document.getElementById(FieldName).cloneNode(true);
  newFields.id = '';
  newFields.style.display = 'block';
  var newField = newFields.childNodes;
  for (var i=0;i<newField.length;i++) {
    var theName = newField[i].name
    if (theName)
      newField[i].name = theName + counter;
  }
  var insertHere = document.getElementById(FieldName);
  insertHere.parentNode.insertBefore(newFields,insertHere);

  $(newFields).find('.datepicker').datepicker();
}

您的按钮的单击事件也有一个错字：将功能从更改add_user1('add_user1')为add_user('add_user1')

工作小提琴演示：http: //jsfiddle.net/Rykus0/xTqvC/

于 2013-01-11T14:56:50.847 回答