如何將代碼應用於動態創建的元素

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

Answer 2

只需創建表， 然后將所需的任何代碼應用到表即可：

$('#excel_table').html(arrExcel2Table);
adjustWidth()

function adjustWidth(){

    var $tbl = $("#tbl"); // And cache your jQuery objects!! Massive performance boost

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

      if (thWidth<tdWidth)                    
          $th.width(tdWidth);
      else
          $td.width(thWidth);           
    }
}