jQuery Blur only once clicked off

Question

I have the follow HTML

<div id="outerID">
  <input id="inner1" type="text" value="button1"/>
  <input id="inner2" type="text" value="button2"/>
  <table>
    <tbody>
      <tr>
       <td>
         <input id="inner3" type="text" value="button2"/>
       </td>
      </tr>
    </tbody>
  </table>
</div>

With the following jQuery

jQuery('#outerID').live('blur', function () {
    alert('fire');
});

I only want "blur" to fire when a click is OUTSIDE of id="outerID" - a user can click inside as many times as they want inside id=outerId but if they 'click off' id=outerId then blur ?

See - http://stackoverflow.com/questions/1403615/use-jquery-to-hide-div-when-click-outside-it - for a more eloquent solution — Tim, Jul 11 '11 at 12:43

score 0 · Accepted Answer · answered Jul 10 '11 at 10:55

Try this:

var insideDiv = "";

jQuery('div#outerID').live('click', function (e) {
    if(insideDiv != "" && insideDiv  != 'outerID'){
        alert('fire');
    }
    insideDiv  = "outerID";
    return false;
});

jQuery('div#outerID2').live('click', function (e) {
    if(insideDiv != ""&& insideDiv  != 'outerID2'){
        alert('fire');
    }
    insideDiv  = "outerID2";
    return false;
});

I assume outerID2 is the id of the other div.

jQuery Blur only once clicked off

1 Answers1