Try this code:
<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
$(".basic").spectrum({
color: "#f00",
change: function(color) {
$("#basic-log").text("change called: " + color.toHexString());
console.log("change");
},
move: function(tinycolor) { console.log("move"); },
show: function(tinycolor) { console.log("show"); },
hide: function(tinycolor) { console.log("hide"); },
beforeShow: function(tinycolor) { console.log("beforeShow"); }
});
$(".sp-container").on({
mouseenter: function(){
console.log("mouseenter");
},
mouseleave: function(){
console.log("mouseleave");
},
click: function(){
console.log("click");
}
});
});
</script>
</head>
<body>
<h2>Basic Usage</h2>
<input type='text' class="basic"/>
<em id='basic-log'></em>
</body>
</html>
OR see:
Jim