无法通过名称引用动态创建的元素 [英] Unable to reference to dynamically created element by name

问题描述

 < TD>< INPUT type =文字name =何时/>< / TD> 
  

所以当用户点击这个元素时，一个日期选择器显示出来：

  $（document）.ready（function（）{
 $（'[name =when]'）。datepicker（）; 
}）; 
  

当用户向这个表中添加一个新行时，我调用setClass函数来设置这个新行（所有行）：

 函数setClass（）{
 $（'[name =when] '）。日期选择器（）; 
} 
  

但这不适用于这些动态创建的行。为什么？

这是我添加行的方式：

 < INPUT type =buttonvalue =Add Rowonclick =addRow（'dataTable'）class =add_remove_row/> 
 
函数addRow（tableID）{
 var table = document.getElementById（tableID）; 
 
 var rowCount = table.rows.length; 
 var row = table.insertRow（rowCount）; 
 
 var colCount = table.rows [1] .cells.length; （var i = 0; i< colCount; i ++）{
 var newcell = row.insertCell（i）; 
 
。 
 
 newcell.innerHTML = table.rows [1] .cells [i] .innerHTML; 
 
 
 switch（newcell.childNodes [0] .type）{
 casetext：
 newcell.childNodes [0] .value =; 
休息; 
 
 casecheckbox：
 newcell.childNodes [0] .checked = false; 
休息; 
 
 caseselect-one：
 newcell.childNodes [0] .selectedIndex = 0; 
休息; 
} 
} 
 setClass（）; 
 
  

解决方案

您应该初始化插件在新增元素上。不过，您需要采取一些特殊的操作。

datepicker插件将类 hasDatepicker 放在它具有的元素上已经初始化，并且不重新初始化它们。由于您正在复制具有此类的元素，因此您需要将其删除，以便重新初始化它。其次，如果该元素没有ID，则datepicker会为其添加一个随机ID。 ID必须是唯一的，但是您的代码正在复制该ID。在我的代码中，我只是从元素中删除ID，所以插件将添加一个新的，唯一的。如果我没有这样做，新行上的日期选择器将填充第一行（因为在从日期选择器中选择某些内容时，当发现要更新的输入时，它会在内部使用ID）。

  function addRow（tableID）{
 var table = document.getElementById（tableID）; 
 
 var rowCount = table.rows.length; 
 var row = table.insertRow（rowCount）; 
 
 var colCount = table.rows [01] .cells.length; （var i = 0; i< colCount; i ++）{
 var newcell = row.insertCell（i）; 
 
。 
 
 newcell.innerHTML = table.rows [1] .cells [i] .innerHTML; 
 
 
 switch（newcell.childNodes [0] .type）{
 casetext：
 newcell.childNodes [0] .value =; 
休息; 
 
 casecheckbox：
 newcell.childNodes [0] .checked = false; 
休息; 
 
 caseselect-one：
 newcell.childNodes [0] .selectedIndex = 0; 
休息; 
} 
} 
 setClass（row）; 
} 
 
函数setClass（newrow）{
 $（newrow）.find（'。hasDatepicker'）。removeAttr（'id'）。removeClass（'hasDatepicker'）。日期选择器（）; 
} 
  

DEMO

I have a table with one row when the page is created:

<TD><INPUT type="text" name="when"/></TD>

So when the user clicks on this element, a datepicker shows up:

$(document).ready(function() {
    $('[name="when"]').datepicker();
});

When the user adds a new row to this table then I call the setClass function to set this on the new row (all rows):

function setClass() {
    $('[name="when"]').datepicker();
}

But this doesn't work on these dynamically created rows. Why?

This is how I add rows:

<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" class="add_remove_row" />

function addRow(tableID) {
    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var colCount = table.rows[1].cells.length;

    for(var i=0; i<colCount; i++) {
        var newcell = row.insertCell(i);

        newcell.innerHTML = table.rows[1].cells[i].innerHTML;


        switch(newcell.childNodes[0].type) {
            case "text":
                newcell.childNodes[0].value = "";
                break;

            case "checkbox":
                newcell.childNodes[0].checked = false;
                break;

            case "select-one":
                newcell.childNodes[0].selectedIndex = 0;
                break;
        }
    }
    setClass();
}

解决方案

You should just initialize the plugin on the newly-added elements. You need to take some special actions, though.

The datepicker plugin puts a class hasDatepicker on elements that it has already initialized, and doesn't re-initialize them. Since you're copying an element that has this class, you need to remove it so that it will be re-initialized. Second, if the element doesn't have an ID, datepicker adds a randomish ID to it. IDs need to be unique, but your code is copying the ID. In my code below, I simply remove the ID from the elements, so the plugin will add a new, unique one. If I didn't do this, the datepicker on a new row would fill in the first row (because it uses the ID internally when finding the input to update after you select something from the datepicker).

function addRow(tableID) {
    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var colCount = table.rows[01].cells.length;

    for(var i=0; i<colCount; i++) {
        var newcell = row.insertCell(i);

        newcell.innerHTML = table.rows[1].cells[i].innerHTML;


        switch(newcell.childNodes[0].type) {
            case "text":
                newcell.childNodes[0].value = "";
                break;

            case "checkbox":
                newcell.childNodes[0].checked = false;
                break;

            case "select-one":
                newcell.childNodes[0].selectedIndex = 0;
                break;
        }
    }
    setClass(row);
}

function setClass(newrow) {
    $(newrow).find('.hasDatepicker').removeAttr('id').removeClass('hasDatepicker').datepicker();
}

DEMO

这篇关于无法通过名称引用动态创建的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！