CODEWITHSUNDEEP
jqueryfocusblur
soroush ghorashi
soroush ghorashi

Reputation: 31

Focusing on child element, fires blur on parent element

Here is my code: 

<div tabindex="0" id="parent" style="margin-top:200px;margin-left:200px;background-color:black;height:100px;width:200px;">
    <input type="text" style="width:80px;margin:5px auto;display:none">
<div>



$("#parent").blur(function() {
     $(this).css("background-color", "blue").animate({
                marginLeft : '+=50'
            }, 400);
     $("#parent>input").css("display", "none");
   });

   $("#parent>input").focus(function() {
     $(this).css("display", "block");
   });
   $("#parent>input").blur(function() {
     $(this).css("display", "none");
   });
   $("#parent>input").keyup(function(e) {
    if (e.which === 13) {
        console.log("enter");
    }
   });

Focusing on the input, causes the blur to be fired on parent div and it leads to disappearance of the div, so user is not able to enter any text inside the textbox!

http://jsfiddle.net/z7Erv/10/

any idea?

Upvotes: 1

Views: 2912

Answers (1)

plumsauced
plumsauced

Reputation: 31

Not sure if this question is outdated - is this maybe what you want to do?: https://jsfiddle.net/1280pn4n/1/

$('#parent').bind('focusin focusout', function () {
    $(this).toggleClass('showup');
});

I just had the same issue and the answer from Keltex helped (use focusin/focusout instead of onfocus/blur):

jQuery figuring out if parent has lost 'focus'

Upvotes: 2

Related Questions