html - javascript无法在动态生成的html表单中工作

时间:2015-02-28 22:03:18

标签: javascript jquery html twitter-bootstrap

表格中的表格行,使用"添加行"按钮。

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

问题:

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

我正在使用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 MARKUP:

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

更新代码以添加新行并初始化DATEPICKER

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");

    }
}

1 个答案:

答案 0 :(得分: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的价值完全取决于您,我不知道您的加价。但这个想法是你需要唯一地识别需要成为Datepickers的新添加的元素。在页面加载时初始化插件仅初始化当时存在的元素,而不是稍后添加的元素。


更新:

根据你的jQuery选择器:

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

您正在识别一个id为&#34; InputDatePicker&#34;的元素。所以发生了两件事之一:

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