有没有一种方法可以将Tabulator绑定到一个动态创建的<div>元素上？

Question

我试图将Tabulator插件的实例绑定到一个动态创建的 <div> 元素，但是没有用。 我可以将Tabulator绑定到通过页面加载事件创建的静态元素上，但是，我需要能够动态地生成新的 <div> 元素，其中包含Tabulator表格。

的HTML。<div> 占位符以及动态创建的 <div> 如下。

HTML。

<div id="CrewLeaderDiv" name="CrewLeader"></div>

JavaScript创建新的嵌套集合 <div> 元素。

        $("#CrewLeader").change(function (element) {
            var selOption = $("#CrewLeader > option:selected");
            window.leaderID = selOption.val();
            var crewLeaderName = selOption.text()

            // Create the Crew Leader Time Card.
            var sHtml = "<div class='card' style='margin: 10px;'>";
            sHtml += "<div class='card-header col-sm-12 roundBorder' style='padding:2px;'>";
            sHtml += "<span class='col-sm-3 ' style='float:left; font-size:16px; text-align:right;'>Crew Leader:&nbsp;&nbsp;</span>";
            sHtml += "<input id='CrewLeaderName' disabled class='col-sm-6 roundBorder' style='float:left; font-size:16px; font-weight:bold; color:darkred; height:100%; width:100%; text-align:center;' value='" + crewLeaderName + "' />";
            sHtml += "</div>";
            sHtml += "<div class='card-body col-sm-12 roundBorder' style='padding:4px; font-size:16px;'>Time Card Entries</div>";
            sHtml += "<div class='col-sm-12 roundBorder' id='CrewLeaderTable' style='font-size:12px;'></div>";
            sHtml += "<div class='btnCrewLeader'><button id='btnCrewLeader' class='btn btn-secondary' type='button'>Click to Enter Time</button></div>";
            sHtml += "</div>";
            $("#CrewLeaderDiv").html(sHtml);
        });

sHtml字符串被传递给#CrewLeaderDiv占位符以创建Bootstrap卡和Tabulator表的占位符（#CrewLeaderTable）。

#btnCrewLeader按钮的 "click "事件处理程序管理实例化Tabulator，如下所示。

        $(document).on('click', '#btnCrewLeader', function () {
            //Remove the button.....
            $("div").remove(".btnCrewLeader");
            //Instantiate the Tabulator editable table
            $("#CrewLeaderTable").tabulator({
                height: "100%",
                layout: "fitColumns",
                //responsiveLayout: "hide",
                data: tabledata,
                columns: [
                    { title: "Phase", field: "phase", hozAlign: "center", editor: "select" },
                    { title: "Start Time", field: "start", hozAlign: "center", sorter: "time", editor: timeEditor },
                    { title: "Finish Time", field: "finish", hozAlign: "center", sorter: "time", editor: timeEditor }
                ]
            });

我在 "datable "数组中存储了几行数据，用于测试目的。

点击按钮会触发事件处理程序，但是Tabulator实例并没有被创建。

如上所述，我可以在静态元素上创建Tabulator表，但我真的需要能够绑定到动态创建的元素上。 我浏览了Tabulator文档，但没有找到关于这个问题的参考资料。

如果能得到任何帮助，我将非常感激。

Answer 1

下面是一个例子，我创建了一个新的div，并将其附加到文档的主体上，然后我用它创建了一个Tabulator。 然后我用它创建一个Tabulator。https:/jsfiddle.net8hcjbatz

这是一般的想法，其中选项将是你的制表机选项。

  const div = document.createElement('div');
  document.body.appendChild(div);
  const table = new Tabulator(div, options);