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

Question

我正在尝试将 Tabulator 插件的实例绑定到动态创建的 <div> 元素，但无济于事。我将 Tabulator 绑定到使用页面加载事件创建的静态元素没有问题；但是，我需要能够动态生成包含 Tabulator 表的新 <div> 元素。

<div> 占位符的 HTML 和动态创建的 <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 占位符以创建引导卡和 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 }
                ]
            });

我有几行数据存储在“datatable”数组中，用于测试目的。

单击按钮会触发事件处理程序，但不会创建 Tabulator 实例。

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

任何帮助将不胜感激。

Answer 1

这是一个示例，我创建了一个新的 div 并将其附加到文档的正文中。然后我用它创建一个制表符。 https://jsfiddle.net/8hcjbatz/

这是一般的想法，其中 options 是您的制表选项。

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