使用 jscolor 颜色选择器向 table 添加行，但选择器未显示

Question

我在 table 中使用 jscolor picker。这在原始 HTML 中的一行中有效。但是，当我从 javascript 添加一行时，颜色选择器不起作用。检查 HTML 创建的输入标签是相同的。我想一定有关于用jscolor js注册这个元素的事情。

这里是演示问题的最小 HTML：

        <head>
            <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js"></script>
        </head>
        <button onclick="add_row_to_table()">Add Row</button>
        <table>
            <thead>
            <tr><th>Colour</th></tr>
            </thead>
            <tbody id="tableBody">
            <tr><td><input class="jscolor"></td></tr>
            </tbody>
        </table>

        <script type="text/javascript">
            function add_row_to_table(p) {
                tableBody = document.getElementById('tableBody');
                newRow = document.createElement('tr');
                colourCell = document.createElement('td');
                colourWidget = document.createElement('input');
                colourWidget.setAttribute('class', 'jscolor');
                colourWidget.setAttribute('autocomplete', 'off');
                colourWidget.setAttribute('style', 'background-image: none, background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);');
                colourCell.appendChild(colourWidget);
                newRow.appendChild(colourCell);
                tableBody.appendChild(newRow);
            }
        </script>

Answer 1

<script type=... 有问题，您需要使用 new jscolor(... 注册新的输入，这是一个有效的代码

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js"></script>
  </head>
  <body>
    <button onclick="add_row_to_table()">Add Row</button>
    <table>
      <thead>
        <tr><th>Colour</th></tr>
      </thead>
      <tbody id="tableBody">
        <tr><td><input class="jscolor"></td></tr>
      </tbody>
    </table>
    <script type="text/javascript">
      function add_row_to_table(p) {
        tableBody = document.getElementById('tableBody');
        newRow = document.createElement('tr');
        colourCell = document.createElement('td');
        colourWidget = document.createElement('input');
        colourWidget.setAttribute('class', 'jscolor');
        colourCell.appendChild(colourWidget);
        newRow.appendChild(colourCell);
        tableBody.appendChild(newRow);
        new jscolor(colourWidget);
      }
    </script>
  </body>
</html>

https://jsbin.com/jaxixod/edit?html,output

使用 jscolor 颜色选择器向 table 添加行，但选择器未显示

Added row to table with jscolor colour picker but picker not showing

javascript

jscolor