onchange не срабатывает при изменении javascript

Question

Я использую спектр (https://github.com/bgrins/spectrum), плагин jQuery для цветных паллет. Моя цель заключается в том, что цвет применяется непосредственно к фону, а пользователь просматривает разные цвета.

То, что я до сих пор это:

//*****Part of a 3rd party file, which I cannot modify**** 
$("#picker1").spectrum({ 
    allowEmpty:true, 
    color: "#ECC", 
    showInput: true, 
    preferredFormat: "hex", 
}); 
//*********************************** 


$("#picker1").on("change keyup paste", function(){ 
    newcolor=$("#picker1").val(); 
    $(".menu-itempreview").css("background-color", newcolor);  
}); 



<ul id="menu-primary-menupreview" class="someclass"> 
    <li class="menu-itempreview">Home</li> 
    <li class="menu-itempreview">Sample Page</li> 
    <li class="menu-itempreview">Uncategorized</li> 
</ul> 


<input type='input' id="picker1" /> 

Fiddle меня здесь: http://jsfiddle.net/h4Lc5b6a/

Проблема заключается в том, что цвет только обновления, когда пользователь нажимает кнопку отправки. Как я могу это сделать, чтобы обновления фона «на лету», а пользователь просматривал разные цвета?

Похоже, проблемы кроются в замене, которое не срабатывает при изменении поля ввода с помощью javascript.

Answer 1

Вы можете использовать обратный вызов move (http://bgrins.github.io/spectrum/#events-move).
Добавить в свою инициализацию спектра:

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

Также вы можете использовать this после инициализации спектра:

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