Question

I made some sticky notes in javascript for fun.

When there are multiple sticky notes on the screen, I want the one that is selected to be brought forward. IE. raise the z-index to be higher then the other sticky notes.
Currently I am doing this with CSS using :hover, which is kind of annoying. I want to do it in javascript/jquery. I tried to do addClass/removeClass with focus() and blur()

This is what I have so far

$('.darkYellow').click(function() {
    $(this).focus(function() {
        $(this).addClass("index");
    });
});

$('.darkYellow').blur(function() {
    $(this).removeClass("index");
}); 

Updated and Working thanks to Christoph
http://jsfiddle.net/EnigmaMaster/aQMhk/6/

Answer 1

Though at the moment I don’t know, why .on() does not work (this shoud be the preferred method!), the following code should work:

$('.darkYellow').live("click", function() {
        $(".index").removeClass("index");
        $(this).addClass("index");
});

This is all you need.

1. live event handler on click ( use of on() should be preferred )
2. look for index note and remove class
3. add Class to current “clicked” element

DEMO