当动态生成输入框时，datetimepicker不起作用

Question

我有一个动态添加行的按钮。该行包括一些输入和选择框。当我在其中一个输入框上使用datetimepicker时，克隆的输入框无法显示datetimepicker，只有第一个能够显示。

以下是摘录，任何人都可以提供帮助吗？

function addRow(tableID) {
  var table = document.getElementById(tableID);
  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);
  var colCount = table.rows[0].cells.length;
  for(var i=0; i<colCount; i++) {
    var newcell = row.insertCell(i);
    newcell.innerHTML = table.rows[0].cells[i].innerHTML;

  }
}

$(document).ready(function() {
   $('.datetimepicker').datetimepicker({
      format : "YYYY-MM-DD",
      ignoreReadonly: true
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<input type="button" value="Add row" onClick="addRow('dyn_table')" />
<table class="table" id="dyn_table">
  <tbody><tr><td><input type="checkbox" class="dyn_xbPayment big-checkbox" name="chk[]" checked="checked" /></td>
      <td>
        <div class="form-group">
          <label for="dyn_payment_method">Payment Method</label>
          <select name="dyn_item_code[]" class="dyn_item_code form-control">
            <option disabled="" selected="" value=""> -- select an option -- </option>
            <option value="cash">Cash</option>
            <option value="cheque">Cheque</option>
            <option value="tt">TT</option>
            <option value="cc">Credit Card</option>
          </select>
        </div>
        <div class="form-group">
          <label for="dyn_amount">Amount</label>
          <input type="number" pattern="[0-9].[0-9]" class="dyn_amount" name="dyn_amount[]" step="0.01">
        </div>
        <div class="form-group">
          <label for="dyn_reference">Reference Number</label>
          <input type="text" class="dyn_reference form-control" name="dyn_reference[]" >
        </div>
        <div class="form-group">
          <label for="dyn_cheque_date">Cheque Date</label>
          <input type="text" class="dyn_cheque_date form-control datetimepicker" name="dyn_cheque_date[]" >
        </div>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

对您的javascript代码进行一些小改动：

function addRow(tableID) {
  var table = document.getElementById(tableID);
  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);
  var colCount = table.rows[0].cells.length;
  for(var i=0; i<colCount; i++) {
    var newcell = row.insertCell(i);
    newcell.innerHTML = table.rows[0].cells[i].innerHTML;
  }

  setDatepickers();
}

setDatepickers = function() {
   $('.datetimepicker').datetimepicker({
      format : "YYYY-MM-DD",
      ignoreReadonly: true
    });
}

$(document).ready(function() {
    setDatepickers();
})

插入新的＆＃39; html你告诉jQuery也为新元素加载datapicker

Answer 2

原因是您必须再次将插件应用于新的生成元素

＆＃13;

＆＃13;

function addRow(tableID) {
  var table = document.getElementById(tableID);
  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);
  var colCount = table.rows[0].cells.length;
  for (var i = 0; i < colCount; i++) {
    var newcell = row.insertCell(i);
    newcell.innerHTML = table.rows[0].cells[i].innerHTML;

  }
  ApplyPicker();
}

function ApplyPicker() {
  $('.datetimepicker').datetimepicker({
    format: "YYYY-MM-DD",
    ignoreReadonly: true
  });
}

$(document).ready(function() {
  ApplyPicker();
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<input type="button" value="Add row" onClick="addRow('dyn_table')" />
<table class="table" id="dyn_table">
  <tbody>
    <tr>
      <td><input type="checkbox" class="dyn_xbPayment big-checkbox" name="chk[]" checked="checked" /></td>
      <td>
        <div class="form-group">
          <label for="dyn_payment_method">Payment Method</label>
          <select name="dyn_item_code[]" class="dyn_item_code form-control">
            <option disabled="" selected="" value=""> -- select an option -- </option>
            <option value="cash">Cash</option>
            <option value="cheque">Cheque</option>
            <option value="tt">TT</option>
            <option value="cc">Credit Card</option>
          </select>
        </div>
        <div class="form-group">
          <label for="dyn_amount">Amount</label>
          <input type="number" pattern="[0-9].[0-9]" class="dyn_amount" name="dyn_amount[]" step="0.01">
        </div>
        <div class="form-group">
          <label for="dyn_reference">Reference Number</label>
          <input type="text" class="dyn_reference form-control" name="dyn_reference[]">
        </div>
        <div class="form-group">
          <div class="col-lg-12">
            <label for="dyn_cheque_date">Cheque Date</label>
            <input type="text" class="dyn_cheque_date form-control datetimepicker" name="dyn_cheque_date[]">
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用解决方案

$(document).ready(function() {
  
  $('.datetimepicker').datetimepicker({
    format : "YYYY-MM-DD",
    ignoreReadonly: true
  });
  
  addRow = function(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
    var colCount = table.rows[0].cells.length;
    for(var i=0; i<colCount; i++) {
      var newcell = row.insertCell(i);
      newcell.innerHTML = table.rows[0].cells[i].innerHTML;
    }
    
    $('.datetimepicker').datetimepicker({
      format : "YYYY-MM-DD",
      ignoreReadonly: true
    });
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<input type="button" value="Add row" onClick="addRow('dyn_table')" />
<table class="table" id="dyn_table">
  <tbody><tr><td><input type="checkbox" class="dyn_xbPayment big-checkbox" name="chk[]" checked="checked" /></td>
      <td>
        <div class="form-group">
          <label for="dyn_payment_method">Payment Method</label>
          <select name="dyn_item_code[]" class="dyn_item_code form-control">
            <option disabled="" selected="" value=""> -- select an option -- </option>
            <option value="cash">Cash</option>
            <option value="cheque">Cheque</option>
            <option value="tt">TT</option>
            <option value="cc">Credit Card</option>
          </select>
        </div>
        <div class="form-group">
          <label for="dyn_amount">Amount</label>
          <input type="number" pattern="[0-9].[0-9]" class="dyn_amount" name="dyn_amount[]" step="0.01">
        </div>
        <div class="form-group">
          <label for="dyn_reference">Reference Number</label>
          <input type="text" class="dyn_reference form-control" name="dyn_reference[]" >
        </div>
        <div class="form-group">
          <label for="dyn_cheque_date">Cheque Date</label>
          <input type="text" class="dyn_cheque_date form-control datetimepicker" name="dyn_cheque_date[]" >
        </div>
      </td>
    </tr>
  </tbody>
</table>

希望这会对你有所帮助。

Answer 4

只需在 addRow 功能中添加日期选择器代码即可。

function addRow(tableID) {
  var table = document.getElementById(tableID);
  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);
  var colCount = table.rows[0].cells.length;
  for(var i=0; i<colCount; i++) {
    var newcell = row.insertCell(i);
    newcell.innerHTML = table.rows[0].cells[i].innerHTML;
  }
  
  $('.datetimepicker').datetimepicker({
      format : "YYYY-MM-DD",
      ignoreReadonly: true
    });	
}

$(document).ready(function() {
   $('.datetimepicker').datetimepicker({
      format : "YYYY-MM-DD",
      ignoreReadonly: true
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<input type="button" value="Add row" onClick="addRow('dyn_table')" />
<table class="table" id="dyn_table">
  <tbody><tr><td><input type="checkbox" class="dyn_xbPayment big-checkbox" name="chk[]" checked="checked" /></td>
      <td>
        <div class="form-group">
          <label for="dyn_payment_method">Payment Method</label>
          <select name="dyn_item_code[]" class="dyn_item_code form-control">
            <option disabled="" selected="" value=""> -- select an option -- </option>
            <option value="cash">Cash</option>
            <option value="cheque">Cheque</option>
            <option value="tt">TT</option>
            <option value="cc">Credit Card</option>
          </select>
        </div>
        <div class="form-group">
          <label for="dyn_amount">Amount</label>
          <input type="number" pattern="[0-9].[0-9]" class="dyn_amount" name="dyn_amount[]" step="0.01">
        </div>
        <div class="form-group">
          <label for="dyn_reference">Reference Number</label>
          <input type="text" class="dyn_reference form-control" name="dyn_reference[]" >
        </div>
        <div class="form-group">
          <label for="dyn_cheque_date">Cheque Date</label>
          <input type="text" class="dyn_cheque_date form-control datetimepicker" name="dyn_cheque_date[]" >
        </div>
      </td>
    </tr>
  </tbody>
</table>