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

Я использую спектр (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" />

Поиграйте со мной здесь: http://jsfiddle.net/h4Lc5b6a/

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

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


javascript jquery css spectrum
person Kevin M    schedule 05.04.2015    source источник
comment
Вот пример: jsfiddle.net/ys8oL94w Проблема с этой скрипкой в ​​том, что мне пришлось изменить 3-й код jquery party, который я не могу изменить в своем реальном проекте.   -  person Kevin M    schedule 06.04.2015

Ответы (1)


arrow_upward
2
arrow_downward

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

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

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

// 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) { });
person Victor    schedule 06.04.2015