Question

我添加了动态input字段，但datepicker无法在动态生成的字段中使用。

＆＃13;

$(document).ready(function() {
  $('#text').datepicker();
})

function addmore() {
  var html = '<div class="form-group"><input type="text" placeholder="text" id="text"><button type="button" onclick="removeInput(this)">&times;</button></div>';
  $('.input-fields').append(html);
}

function removeInput(obj) {
  $(obj).parent().remove();
}

＆＃13;

.form-group {
  margin-bottom: 10px;
}

＆＃13;

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<div>
  <div class="input-fields">
    <div class="form-group">
      <input type="text" placeholder="text" id="text">
    </div>
  </div>
  <button type="button" onclick="addmore()">Add more</button>
</div>

＆＃13;

Answer 1

您需要为每个附加输入生成新的Id，然后调用datepicker函数。

var i = 0;
$(document).ready(function(){
  $('#text').datepicker();
})
function addmore(){
    i++
    var html = '<div class="form-group"><input type="text" placeholder="text-'+i+'" id="text-'+i+'"><button type="button" onclick="removeInput(this)">&times;</button></div>';
    $('.input-fields').append(html);
     $('#text-'+i).datepicker();    
}
function removeInput(obj){
    $(obj).parent().remove();
}

.form-group {
  margin-bottom: 10px;
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<div>
  <div class="input-fields">
    <div class="form-group">
      <input type="text" placeholder="text" id="text">
    </div>
  </div>
  <button type="button" onclick="addmore()">Add more</button>
</div>

Answer 2

最简单的方法是使用text类。您使用了text个ID，这是错误的方式，因为当您添加项目时，您将尝试为具有相同id的更多元素附加事件。

＆＃13;

$(document).ready(function() {
  $('.text').datepicker();
})

function addmore() {
  var html = '<div class="form-group"><input type="text" placeholder="text" class="text"><button type="button" onclick="removeInput(this)">&times;</button></div>';
  $('.input-fields').append(html);
  $('.text').datepicker();
}

function removeInput(obj) {
  $(obj).parent().remove();
}

＆＃13;

.form-group {
  margin-bottom: 10px;
}

＆＃13;

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<div>
  <div class="input-fields">
    <div class="form-group">
      <input type="text" placeholder="text" class="text">
    </div>
  </div>
  <button type="button" onclick="addmore()">Add more</button>
</div>

＆＃13;

Jquery UI datepicker在动态字段中不起作用

2 个答案: