在动态输入上使用 jscolor.js答案

【问题标题】：using jscolor.js on dynamic input在动态输入上使用 jscolor.js
【发布时间】：2013-10-30 20:24:05
【问题描述】：

我正在使用来自http://jscolor.com/的颜色选择器

我正在尝试将它附加到一些动态输入，但无济于事。就动态输入而言，在页面加载时输入不存在，只有在用户单击某些内容后输入才可用。例如，我有一行数据，每一行都有不同的背景颜色。这行数据是使用 ajax 加载的。在每一行的末尾，有一个编辑按钮。通过单击编辑按钮，它将为单击的行显示一个输入文本框。当用户单击输入文本框时，我想调用 jscolor 选择器。我该怎么做？

谢谢

【问题讨论】：

这里引入了非常相似的问题：stackoverflow.com/questions/43174801/…，这对我的动态输入有帮助。

标签： jscolor

【解决方案1】：

由于某种原因 jscolor.init() 对我不起作用，并查看我调用的代码

jscolor.installByClassName("jscolor");

功能。

所以...

$(document).ready(function() {
  jscolor.installByClassName("jscolor");
});

希望对你有帮助

【讨论】：

这也为我做了。
现在已弃用。

【解决方案2】：

我也遇到了这个问题，但幸运的是它很容易解决。动态创建输入后，您需要（重新）初始化 jscolor：

jscolor.init()

【讨论】：

最简单的解决方案，只是我们厌倦了在您仍在生成输入时调用它，因为它可能会减慢速度。
这对我不起作用，我收到一条错误消息，说 jscolor.init 不是函数：/ 如果有人知道它现在是如何工作的，请详细说明，在此之前我重置 jscolor 并再次加载脚本Jquery... window.jscolor = undefined; $.getScript("../Scripts/jscolor.min.js", function () { });

【解决方案3】：

这对我有帮助

<script>
 $(document).on('click', '#myPickerId', function () {
    var obj = $(this)[0];
    if (!obj.hasPicker) {
        var picker = new jscolor.color(obj, {});  //
        obj.hasPicker = true;
        picker.showPicker();
    }
});    
</script>

在我的例子中，选择器控件是动态的，因为它位于 Knockout.js 的“with”语句中，该语句在需要时隐藏并重新创建选择器。

【讨论】：

$(this)[0] 的意义何在？这不只是返回this而没有任何收获吗？
@Carcigenicate 我认为这是因为$(this)[0] 返回一个数组，而jscolor 需要实际的 div 元素。
$(this)[0] 获取实际的 DOM 元素，而不是 jQuery 元素。
这实际上是我的解决方案！谢谢！！

【解决方案4】：

动态添加输入字段时遇到同样的问题

设法通过调用使其工作 jscolor.install();

PS：jscolor v2.4.5

【讨论】：

【解决方案5】：

截至 2020 年，最初的问题应该可以通过动态创建输入元素，然后调用 new jscolor(input) 来解决。使用 JQuery（你也可以使用 vanilla JS）：

var color_input = $('<input class="jscolor" spellcheck="false">');
new jscolor(color_input[0]);

这将使弹出选择器在单击时出现，并且一切看起来都正常。但是，您不能以编程方式对其进行操作。要使用上述对象设置颜色，您通常会使用如下方法：color_input[0].jscolor.fromString("#B7B7B7")。但这对于动态创建的对象将失败，因为 color_input[0].jscolor 未定义。我相信这是 Jscolor 中的一个错误（并且可能很容易解决），因为缺少的对象实际上可以通过 color_input[0]._jscLinkedInstance 获得。因此，您可以自己在实例化时设置对象：

var color_input = $('<input class="jscolor" spellcheck="false">');
color_input[0].jscolor = new jscolor(color_input[0]);

然后一切看起来都按预期工作。希望这可以帮助像我一样遇到此答案页面的其他人。

【讨论】：