CODEWITHSUNDEEP
javascriptjquery
Eugeny89
Eugeny89

Reputation: 3741

jquery: drawing and erasing border on focus and blur on any child elements of a div

I'm having a div which can have many (not less then 5) child elements (mostly they are div, table and img). I want to draw border (e.g. with jquery.css method) when a user clicked on any child element of that div. It can be easily done with something like

$div.click(function() {
    //drawing frame here
});

Removing frame on click outside is much more harder. Of cause I can handle deselecting on click event thrown by any other div or body. But... maybe there's more elegant solution?

Thank you in advance!

Upvotes: 1

Views: 292

Answers (2)

Stefan
Stefan

Reputation: 14873

Try using function on the surrounding div

Example: HTML:

<div id="test">
    <div><p>Hallo</p></<div>
        <img src="not found" alt="not found">
    </div>

JS:

$('#test').on('click', '*', function(){

    $(this).css('border', '1px solid red');
return false;
});

Fiddler: http://fiddle.jshell.net/

Upvotes: 1

Michael Malinovskij
Michael Malinovskij

Reputation: 1422

Try to use .on('focusin') and .on('focusout') events to handle that.

More info: focusin, focusout and .on();

Upvotes: 3

Related Questions