jQuery事件更改图像上的嵌入式背景颜色

Question

I need a help detecting on change event of a background-color inline on "img" tag by a color picker.

For example, I have this code:

<span class="ui-button-text">
<img id="cp-background" src="transparent.png" style="background-color: rgb(100, 100, 90);"></img>
</span>

I need to detect if style="backgroung-color" as changed with Jquery.

I have tried this code, but I don't have sucess:

$("#ok-cp-background").data('bgcolor', $this.css('background-color')).change(function(){
     alert("Changed");
});

Can anyone please help me?

Thank You.

Answer 1

I think the simple solution is using the .trigger() function. Your script to attach event listener:

$("#cp-background").on("styleChanged",function(event, propertyName){

});

Extend your $.css() function to call trigger()

(function($)
{
    var oldcss = $.fn.css;
    $.fn.css = function()
    {
        var ret = oldcss.apply(this, arguments);
        if (arguments.length > 1){ //to ensure this function is called to assign a new style.
            this.trigger("styleChanged",arguments);
        }
        return ret;
    };
})(jQuery);

Inside your color picker code, you use .css() to change the background-color.