Question

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

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);
                });

        });

在我的代码中，这不起作用，我不知道为什么。有人可以帮帮我吗？

Answer 1

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

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

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

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

Answer 2

我认为你为自己做的事情很难

这样做会不会更容易

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>

我的代码

2 个答案: