Jquery 点击输入框显示div，点击正文隐藏div

Question

I have an input field when you click on it, it will show/display a div below it.

Once the div is displaying, if you click in the div the div will remain showing (display block), and if you click off the div (on the body) the div will disappear (display none).

    $("#input-field").click(function() {
       $("#div").show();
       $("#div").ready(function(){
          if ($('#div').css('display') == 'block')
             {
                $(document).click(function(e) {
                    if (e.target.id != 'div' && !$('#div').find(e.target).length) {
                        $("#div").hide();
                    }
                });
             }
       });
    });  

Problem is, this works fine one single time (click on the input field, the div shows, then click on the body and the div disappears), but if I click back on the input field nothing happens.

I've been wrestling with this for hours...

https://jsfiddle.net/n8671asp/1/

Answer 1

Just change the event click to mouseup . Hope it will work.

$(document).mouseup(function(e) {
    if (e.target.id != 'div' && !$('#div').find(e.target).length) {
        $("#div").hide();
    }
});

Answer 2

You might not want this, but instead of seeing if the target is not the input, how about you just focus on .focus() and .focusout() ? These functions control when you can type in the input and when you cannot.

 $("#input-field").focus(function() { $("#div").show(); }); $("#input-field").focusout(function(e) { $("#div").hide(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- example HTML --> <div id="div">I'm the div</div> <input val="input to click" id="input-field">