javascript - Stop element from disappearing when clicked -

i'm writing simple jquery plugin dynamically place div under text box whenever has focus. i've been able position right in browsers.

i have attach 2 event handlers on focus , blur events of textbox. , works okay, problem div has been placed under textbox closes when click on it. makes sense why happen, it's because textbox loses focus, there way can stop happening?

i tried attaching blur event handler -

if($(mainelem).is(":focus")) return; 

where mainelem div shown below textbox.

here jsfiddle illustrate problem.

you not going able use blur event if want place "clickable" elements in div shows. 1 way solve bind event listener more global element document , filter out targets.

here code sample:

$(document).on('click', function (e) {       var targetel = e.target,           parent = $(e.target).parents()[0];       if (relelem[0] === targetel || self[0] === targetel || self[0] === parent) {           $(mainelem).show();       } else {           $(mainelem).hide();       }  }); 

here update fiddle: http://jsfiddle.net/9yhkw/6/