Force Element To Hide On Click Outside Of Textbox

Here is what I have: $(document).ready(function () { $('#H-Alert').hide(); $('html').click(function (e) { if (e.target.className == '.h-textbox') { $('#H-Alert').show(

Solution 1:

You're probably looking for the blur and focus events. You can do this using jQuery as follows:

$('#H-Alert').hide();
$(window).ready(function(){
    $('.h-textbox').blur(function(){
      $('#H-Alert').show();
    }).focus(function(){
      $('#H-Alert').hide();
    });
});

Solution 2:

For events on entering or leaving textboxes the solution of @meltuhamy may be better, but if you like to work with the events directly, you could use this:

$(document).click(function(event) {
    if($(event.target).closest(".h-textbox").length == 0) {
        if($("#H-Alert").is(":visible")) {
            $("#H-Alert").hide();
        } else {
            $("#H-Alert").show();
        }
    }
});