Question

这是我的代码

 $(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的这部分工作完美，但是当我点击添加更多字段时，datepicker不起作用。

                **<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 ---------->

Answer 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/

我们如何在动态添加的文本字段上应用jQuery datepicker

1 个答案: