颜色选择器未显示在我的代码中答案

【问题标题】：color picker doesn't show in my code颜色选择器未显示在我的代码中
【发布时间】：2016-09-20 04:26:09
【问题描述】：

我需要使用颜色选择器，所以我使用这个：

http://www.eyecon.ro/colorpicker/#about

在我的页面 html 中，我创建了这个：

<input id="colore_sfondo_generale" type="text" class="form-control" value="">

我的 jquery 代码是：

$('body').on('click','#colore_sfondo_generale',function(){
            $('#colore_sfondo_generale').ColorPicker({
                    onSubmit: function(hsb, hex, rgb, el) {
                        $(el).val(hex);
                        $(el).ColorPickerHide();
                    },
                    onBeforeShow: function() {
                        $('#colore_sfondo_generale').ColorPickerSetColor(this.value);
                    }
                })
                .bind('keyup', function() {
                    $('#colore_sfondo_generale').ColorPickerSetColor(this.value);
                });

        });

在我的代码中这是行不通的，我不知道为什么。谁能帮帮我？

【问题讨论】：

您检查控制台是否有错误？
@ShadowWizard 是的，但在控制台中没有错误
Shadow Wizard 的答案有效。请注意插件随附的jquery.js。它很旧并且不支持.on() 方法，您需要使用.live()
@dingo_d 实际上不需要任何一个，只需将其绑定到自 jQuery 的第一个版本以来就存在的 $(document).ready() 中。（.live() 和 .on() 都适用于使用代码动态创建的元素，这里不是这种情况）
我尝试使用下载的插件对其进行测试，当将.on 更改为.live 时，它可以工作。但我同意你的看法，这完全没有必要。

标签： jquery colors color-picker

【解决方案1】：

我认为你在为自己做事

这样做会不会更容易

http://jsbin.com/lucetuqucu/edit?html,js,output

$('#colorSelector').ColorPicker({
	color: '#0000ff',
	onShow: function (colpkr) {
		$(colpkr).fadeIn(500);
		return false;
	},
	onHide: function (colpkr) {
		$(colpkr).fadeOut(500);
		return false;
	},
	onChange: function (hsb, hex, rgb) {
		$('#colorSelector div').css('backgroundColor', '#' + hex);
	}
});

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://www.rachelgallen.com/css/colorpicker.css" type="text/css" />
    <link rel="stylesheet" media="screen" type="text/css" href="http://www.rachelgallen.com/css/layout.css" />
    <title>ColorPicker - jQuery plugin</title>
	<script type="text/javascript" src="http://www.rachelgallen.com/js/jquery.js"></script>
	<script type="text/javascript" src="http://www.rachelgallen.com/js/colorpicker.js"></script>
    <script type="text/javascript" src="http://www.rachelgallen.com/js/eye.js"></script>
    <script type="text/javascript" src="http://www.rachelgallen.com/js/utils.js"></script>
    <script type="text/javascript" src="http://www.rachelgallen.com/js/layout.js"></script>
</head>

<body>
<div id="colorSelector">
  <div style="background-color:#ff00ff"></div>

  </div>
</body>

</html>

【讨论】：

（查看 sn-p 整页）

【解决方案2】：

这不应该出现在点击事件处理程序中。

只需直接附加它，它应该可以按预期工作：

$(document).ready(function() {
    $('#colore_sfondo_generale').ColorPicker({
        //options here...
    });
});

.click() 事件由选择器自己处理，当您在每次点击中附加它时，您就会中断它的事件。

【讨论】：