jQuery使用val（）设置输入并激活change（）

Question

I have a large number of color selectors that input the value into a input field:

<input type="text" class="colour_picker"/>

Now when I prepopulate the fields, I want to use something like:

$(document).on("change", ".colour_picker",function(){

$(this).css("background-color", "#"+$(this).val());
});

However, this does not fire, I fugured out that I would need to call .change() after setting .val(), however is there an easier way to do this? I have coded thousands of lines of JS for this and don't really feel like going through them all finding all of the pre-population scripts and modifying them.

EDIT: Here's a fiddle to show an example of the problem. http://jsfiddle.net/kj5sjs22/1/

Answer 1

Onchange only fires when a user types a text and, then, the input lose focus. It's not your case. You must trigger the event.

$(".colour_picker").val("000000").trigger('change');

Regards.

Answer 2

Try

$(document).on("change", ".colour_picker",function(){
 $(this).css({"background-color":"#"+$(this).val()});
});

or

$(".colour_picker").keyup(function(){
 $(this).css({"background-color":"#"+$(this).val()});
});