javascript - html - javascript 无法以动态生成的 html 形式工作

Question

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

该行中的一个字段是“日期”，它使用日期选择器来选择日期。

问题:

日期选择器不会显示动态生成行的时间。

我正在使用 bootstrap 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 在输入上调用日期选择器函数

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

听起来您已成功向页面添加新元素。但是一旦添加了这些元素，您需要定位应该是日期选择器的元素并在这些元素上初始化插件:

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 的值完全取决于您，我不知道您的标记。但想法是，您需要唯一地标识需要成为日期选择器的新添加的元素。页面加载时初始化插件只会初始化当时存在的元素，不会初始化以后添加的元素。

<小时/>

更新:

根据您的 jQuery 选择器:

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

您正在识别 id 为“InputDatePicker”的元素。因此发生了以下两件事之一:

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