javascript - 如何将代码应用到动态创建的元素

Question

仅当页面加载时表格已存在于文档中时，以下代码才有效。然而，我希望它应用于动态创建的表。 这可以吗？

 var colNumber=22


for (var i=0; i<colNumber; i++)
{
  var thWidth=$("#tbl").find("th:eq("+i+")").width();
  var tdWidth=$("#tbl").find("td:eq("+i+")").width();      
  if (thWidth<tdWidth)                    
      $("#tbl").find("th:eq("+i+")").width(tdWidth);
  else
      $("#tbl").find("td:eq("+i+")").width(thWidth);           
}  

该表是通过以下方式创建的:

    function loadFile(event){
    alasql('SELECT * FROM FILE(?,{headers:false})',[event],function(data){  
        var keys = [];
        for (var i = 0; i < data.length; i++) {
            for (var categoryid in data[i]) {
                var category = data[i][categoryid];
                keys.push(categoryid);
            }
        }

        keysConverted = keys.map(foo);
        var vMin = Math.min.apply(null, keysConverted);
        var vMax = Math.max.apply(null, keysConverted);
        var start = vMin-1 
        var ColNeeded = vMax - vMin+1;

        var arrExcel2Table = '<table id="tbl">';
        for (var i = 0; i < data.length; i++){
            arrExcel2Table = arrExcel2Table + '<tr>';
                for (var j = 0; j < ColNeeded; j++){
                    cellValue = data[i][number2Letter(j+start)];
                    if (typeof cellValue === "undefined"){
                        cellValue = '';
                    }
                    arrExcel2Table = arrExcel2Table + '<td>' + cellValue + '</td>';
                }
            arrExcel2Table = arrExcel2Table + '</tr>';  
        }
        arrExcel2Table = arrExcel2Table + '</table>';   
        document.getElementById('excel_table').innerHTML = arrExcel2Table;
    }); 
}

Answer 1

创建要运行的函数并从动态元素添加事件。例如

arrExcel2Table = arrExcel2Table + '<td>' + cellValue + '</td>';

可以替换为

arrExcel2Table = arrExcel2Table + '<td onclick="myFunction();">' + cellValue + '</td>';

上面的代码将调用您创建的函数

myFunction() {
   alert();
}