Question

I have a text box input in a form;
when I click it, a link appears next to it. When I click outside the text input box, the link gets hidden.

I have this code that changes style of the text box input field and hides the link:

$('#txtbox').blur(function(){
$('#txtbox').removeClass('active');
$('#txtbox').addClass('passive');
$('#link').hide();
});

I’d like to be able to click on the link, but when I click wherever outsite the text box, the link gets hidden.

How can the link remain visible when I click on it, but also to get hidden when I click outsite the textbox and when I don’t click on the link?

Answer 1

Try this.

$(function(){
   $(document).click(function(){
      $('#link').hide();
   });
   $('#link').click(function(e){
      e.stopPropagation();
      //Do other stuff on click of link here
   });
   $('#txtbox').blur(function(){
       $('#txtbox').removeClass('active').addClass('passive');
   }).focus(function(e){
       $('#txtbox').addClass('active').removeClass('passive');
       $('#link').show();
   }).click(function(e){
        e.stopPropagation();
   });
});

Demo