html - javascript 不能在动态生成的 html 表单中工作

Question

通过“添加行”按钮动态生成的表格中的行。

行中的一个字段是 Date，它使用 datepicker 来选择日期。

问题：

当行动态生成时，日期选择器不显示。

我正在使用引导程序 3。

这是在按钮单击时生成表格行的代码。

    function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    if(rowCount < 40){                            // limit the user from creating fields more than your limits
        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;
        }
    }else{
        alert("Maximum Players per Entry is 40");

    }
}

日期输入的 HTML 标记：

     <div class="form-group">
 <label for="InputDatePicker">Date:</label>
  <input type="text" class="form-control" placeholder="Select Date" id="InputDatePicker">
 </div>

JAVASCRIPT 在输入时调用 datepicker 函数

<script>
$('#InputDatePicker').datepicker();
</script>

更新代码以添加新行并初始化日期选择器

function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    if(rowCount < 40){                            // limit the user from creating fields more than your limits
        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;
        }
        $('#InputDatePicker').datepicker();
    }else{
        alert("Maximum Players per Entry is 40");

    }
}

Answer 1

大概您的意思是您使用的是the jQuery UI Datepicker plugin？ （或类似的东西？）在这种情况下，您永远不会在动态添加的元素上初始化插件：

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;
}

听起来您正在成功地向页面添加新元素。但是一旦添加了这些元素，您需要定位应该是 Datepicker 的元素并在这些元素上初始化插件：

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;
}
$(someSelector).datepicker();

someSelector 的值完全取决于你，我不知道你的标记。但想法是，您需要唯一标识需要成为 Datepicker 的新添加元素。页面加载时初始化插件只会初始化当时存在的元素，不会初始化以后添加的元素。

---

更新：

根据您的 jQuery 选择器：

$('#InputDatePicker').datepicker();

您正在使用“InputDatePicker”的id 标识一个元素。所以发生了两件事之一：

1. 您新添加的元素没有id，这意味着这个选择器没有选择它们。在这种情况下，您需要选择新添加的元素。
2. 您新添加的元素确实具有id，这意味着您的HTML 无效并且代码的行为未定义。在这种情况下，您需要修复您的 HTML，以免重复使用 id 值并相应地更新您的选择器。根据定义，id 值必须是唯一的。