颜色选择器未添加到动态 HTML 表答案

【问题标题】：Color picker not adding to dynamic HTML table颜色选择器未添加到动态 HTML 表
【发布时间】：2016-09-16 16:21:53
【问题描述】：

我正在尝试向 HTML 添加颜色选择器，但它不起作用。

小提琴：

这是我的代码：

HTML

<button id="add">
  Add to table
</button>
</button>
<table id="points-table" border="1">
  <tr>
    <td>line-item</td>
    <td>color-picker</td>
  </tr>
</table>

jQuery:-

$(document).ready(function() {

$('#add').click(function() {
    alert('clicked')
    $('#points-table tr:last').after('<tr>' + '<td>1</td>'

      + '<td>   <input class="jscolor" value="ab2567"/>    </td></tr>');

  })


})

【问题讨论】：

您期望发生什么？
您的脚本只是在表中添加一行，其中包含硬编码值。我不确定这会让你期待一个颜色选择器出现。
我编辑了小提琴并添加了新版本。我希望颜色选择器也能显示在 HTML 表上。
插件仅在 DOMContentLoaded 上检查类。要初始化新元素，您需要明确地调用它：jscolor.com/examples/#example-instantiating 参见例如：jsfiddle.net/csgn6051/3
非常感谢..我没有注意到。

标签： jquery html css color-picker

【解决方案1】：

您需要使用.val() 获取颜色值并将其分配给变量。然后使用变量fir表中的输入值。

见小提琴https://jsfiddle.net/csgn6051/5/

$(document).ready(function() {
$('#add').click(function() {
    var color = $('#color').val();
    $('#points-table tr:last').after('<tr>' + '<td>1</td>'
      + '<td>   <input class="jscolor" value="'+color+'"/>    </td></tr>');

   //This part below came from the comment by A. Wolf
   new jscolor($('#points-table tr:last').find('.jscolor')[0])
  })
})

【讨论】：

【解决方案2】：

在您的情况下，您可以通过以下方式获取颜色值： $('.jscolor').val();

但是，我建议你为你的 Color Pick Div 使用一个 ID。

【讨论】：