Question

我建立了一个小的颜色选择器模块。但它只在第二次调用pickColor时打开（然后才能工作）。我还试图将SELECT DISTINCT A.* FROM audios AS A INNER JOIN favorites AS F ON A.id = F.audio_id AND F.user_id = ? AND A.status = '1' ORDER BY F.[time] DESC打包成_openColorPicker，但这也不起作用。事实上，当我这样做时，颜色选择器根本没有显示出来。

我发现有趣的是绑定到change事件是有效的，所以$ selector必须已经找到了元素。

所以我有两个问题：

1）为什么选择器仅在第二次拨打setTimeout之后显示？

2）当我将_openColorPicker电话打包在_openColorPicker时，为什么选择器根本没有打开？

编辑：setTimeout函数在用户右键单击文档然后单击现在显示的上下文菜单后执行。

完整代码：

_openColorPicker

上面的代码与const ColorUtils = { _initialized: false, _openColorPicker: function () { $('#color-picker').click(); }, pickColor: function (onChangeCallback, context) { if (!this._initialized) { $('<input/>').attr({ type: 'color', id: 'color-picker', display: 'hidden', value: '#ffffff' }).appendTo('#centralRow'); this._initialized = true; $('#color-picker').on('change', onChangeCallback.bind(context)); } this._openColorPicker(); // version with timeOut const scope = this; setTimeout(function () { scope._openColorPicker(); }, 1000); } }; export default ColorUtils;

类似

Answer 1

结帐this post。看起来你不能触发一个看不见的颜色选择器的点击。这个答案建议给元素一个绝对位置并将其放在屏幕外，如下所示：

position:absolute;
left:-9999px;
top:-9999px;

Answer 2

我试图复制你的案子（据我理解）：JSFIddle

我做了一些改变。我将$('<input/>')移动到对象ColorUtils的属性中，并将其附加到具有绝对位置且在屏幕外的DOM。

（还评论了display:'hidden'，因为它是display:none或visibility:hidden以及CSS属性，而不是Html属性）

在文档的右侧clic上我实例化选择器（并注册回调+上下文），然后向DOM添加一个按钮以再次触发选择器。

它是否符合您的要求？

手动点击事件仅在第二次点击时触发

2 个答案: