When the page is loaded into input type="color" there is a value , which already contains the default color #0000ff - I try to do it via trigger("input") , but nothing happens:

 <input id="csmenu-1" value="#ff0080" class="js-csmenu-1" type="color"> $(".js-csmenu-1").trigger("input"); $(".js-csmenu-1").on("input", function() { var val = $(this).val(); $(".js-view-csmenu").css("backgroundColor", val); });

    1 answer 1

    Change the sequence for assigning an input event handler and invoking this event.

     $(".js-csmenu-1").on("input", function() { var val = $(this).val(); $(".js-view-csmenu").css("backgroundColor", val); }); $(".js-csmenu-1").trigger("input"); 
     .js-view-csmenu { width:200px; height:100px; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="csmenu-1" value="#ff0080" class="js-csmenu-1" type="color"> <div class="js-view-csmenu"><div>