Onchange Doesn't Fire When Modified By Javascript

I am using spectrum (https://github.com/bgrins/spectrum), a jQuery plugin for color palletes. My goal is that the color is being directly applied on the background, while the user

Solution 1:

You can use the move callback (http://bgrins.github.io/spectrum/#events-move). Add to your spectrum initialization:

$("#picker1").spectrum({
    //...,move: function(color) {
        $(".menu-itempreview").css("background-color",  color.toHexString());
    }
}); 

Also you can use this after the spectrum initialization:

// Alternatively, they can be added as an event listener:
$("#picker").on('move.spectrum', function(e, tinycolor) { });
$("#picker").on('show.spectrum', function(e, tinycolor) { });
$("#picker").on('hide.spectrum', function(e, tinycolor) { });
$("#picker").on('beforeShow.spectrum', function(e, tinycolor) { });