Cannot set background-color in jQuery button

Question

I have a jQuery UI toggle button. When the button is clicked, I want to set the inside square to an arbitrary color. Here is jsFiddle that show the issue.

http://jsfiddle.net/fvcdY/4/

When the button is clicked, I expect the black rectangle to become red, but, for some reasons, it stays black.

Thanks for your help.

Answer 1

You can do this:

var legend = $("<span/>", {
    text: ' ',
    style: 'display: inline-block; width: 13px; height: 13px;background-color:black',
    id: 'legend'
});

So now you can use this id instead of the variable:

input.button().click(function() {
    $('#legend').css('background-color', 'red');
});

Check it here: http://jsfiddle.net/JpECU/1/