Is there a way to check if a specific item has been selected?

Question

Perhaps my question sounds somewhat generalized, so let me be more clear.

I have a text box that is hidden by blur, which should be replaced by another div. To be more specific, the above text area contains markdown code, and the div contains the analyzed version of this code.

Now I'm trying to add a formatting toolbar on top of the text box, but of course, when I click on it, a blur event is fired and the text box is hidden, which is not at all convenient.

So my question is, is it even possible to prevent the default blur behavior by clicking on the toolbar, and if so, what is the best way to do this.

Thanks so much for your time :)

Answer 1

Edit: my previous solutions did not cut it, so try something else. I don’t really like to bind an event document click, but in this case it may be the best solution, because it seems that you are coding some kind of WYSIWYG editor. You can customize it to instead .one.

$(document).click(function(e){
    if ($(e.target).closest("#container").length == 0) {
        // Target that was clicked is not inside the container, so we can hide or replace the textarea
        $("textarea").hide();
    }
});

You can try this on jsFiddle .