onchange 在被 javascript 修改时不会触发

Question

我正在使用 spectrum (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/

问题是，只有当用户点击提交按钮时，颜色才会更新。我怎样才能做到这一点，以便在用户浏览不同颜色的同时动态更新背景？

似乎问题出在 onchange 上，当 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) { });

onchange 在被 javascript 修改时不会触发

onchange doesn't fire when modified by javascript

javascript

css

jquery

spectrum