多个颜色选择器用于多个div更新问题

Question

我为三个div添加了三个颜色选择器，并为此添加了jquery。这是我的代码：

<script>
$(document).ready(function() {
    $('#heading_color').blur(function() {
        var headingcolor = $("#image_title_color").val();
        $("#image_title").css("color", headingcolor);
    }); 
    $('#desc_color').blur(function() {
        var desccolor = $("#image_description_color").val();
        $("#image_description").css("color", desccolor);
    }); 
    $('#button_color').blur(function() {
        var buttoncolor = $("#image_button_color").val();
        $("#image_button_text").css("color", buttoncolor);
    }); 
});

<input id="image_title" type="text" class="regular-text" name="image_title" value="<?php echo $edit_values->image_title; ?>" style="color:<?php echo $edit_values->image_title_color; ?>">

<?php $custom_color_title = $edit_values->image_title_color; 
if( $custom_color_title!= '' ) { ?>
    <input type="text" value="<?php echo $edit_values->image_title_color; ?>" class="custom_color" id="heading_color" name="heading_color" />
<?php } else { ?>
    <input type="text" value="#000" class="custom_color" id="heading_color" name="heading_color" /> <?php } ?>

<input type="hidden" value="<?php echo $edit_values->image_title_color; ?>" class="hidden_color" id="image_title_color" name="image_title_color" />



<textarea rows="5" cols="37" id="image_description" class="regular-text" name="image_description" style="color:<?php echo $edit_values->image_description_color; ?>"><?php echo $edit_values->image_description; ?></textarea>
<?php $custom_color_desc = $edit_values->image_description_color; 
if( $custom_color_desc!= '' ) { ?>
    <input type="text" value="<?php echo $edit_values->image_description_color; ?>" class="custom_color" id="desc_color" name="desc_color" />
<?php } else { ?>
    <input type="text" value="#000" class="custom_color" id="desc_color" name="desc_color" /> <?php } ?>

<input type="hidden" value="<?php echo $edit_values->image_description_color; ?>" class="hidden_color" id="image_description_color" name="image_description_color" />
</tr>



<input id="image_button_text" type="text" class="regular-text" name="image_button_text" value="<?php echo $edit_values->image_button_text; ?>" style="color:<?php echo $edit_values->image_button_color; ?>">
<?php $custom_color_button = $edit_values->image_button_color; 
if( $custom_color_button!= '' ) { ?>
    <input type="text" value="<?php echo $edit_values->image_button_color; ?>" class="custom_color" id="button_color" name="button_color" />
<?php } else { ?>
    <input type="text" value="#000" class="custom_color" id="button_color" name="button_color" /> <?php } ?>

<input type="hidden" value="<?php echo $edit_values->image_button_color; ?>" class="hidden_color" id="image_button_color" name="image_button_color" />

其他颜色选择器的jquery是：

jQuery(document).ready(function($){
var customOptions = {
    // Declare a default color here,
    defaultColor: true,
    // a callback to fire whenever the color changes to a valid color
    change: function(event, ui){
        $("#image_button_text").css( 'color', ui.color.toString());*/
        var head_color = $( '#heading_color' ).val();
        var desc_color = $( '#desc_color' ).val();
        var btn_color = $( '#button_color' ).val();

        $( '#image_title_color' ).val( head_color );
        $( '#image_description_color' ).val( desc_color );
        $( '#image_button_color' ).val( btn_color );

        $( "#image_title" ).css( 'color', head_color);
        $( "#image_description" ).css( 'color', desc_color);
        $( "#image_button_text" ).css( 'color', btn_color);

    },
    // a callback to fire when the input is emptied or an invalid color
    clear: function() {},
    // hide the color picker controls on load
    hide: true,

    history: true,
    // show a group of common colors beneath the square
    palettes: true
};
$('.custom_color').wpColorPicker(customOptions);

}）;

当我在选择颜色后提交按钮时，它无法更新颜色，但我再次单击提交按钮它会反映更改。但是，当我提交按钮时，它会再次显示颜色值。

我想摆脱这个问题，并在更新提交按钮时更新新的颜色值。

感谢。