title: JQuery capturing table row lost focus
body: <p>suppose i have table with 5 columns. in each column any kind of things could be there like only text or text inside span or input box, dropdown, checkbox or radio button etc. i want when user switch focus from any control to other row of same table or out side out that table then a function will be triggered or show alert like focus lost.</p>
  
  <p>i got a similar script but it is not working as expected. here whole code.</p>
  
  <pre><code>&lt;div id="grd1"&gt;
  &lt;table&gt;
      &lt;tr id="tx"&gt;&lt;td&gt;Hello1&lt;/td&gt;&lt;td&gt;&lt;input /&gt;&lt;/td&gt;&lt;td&gt;&lt;input /&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;Hello2&lt;/td&gt;&lt;td&gt;&lt;input /&gt;&lt;/td&gt;&lt;td&gt;&lt;input /&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  
  var delayedFn, blurredFrom;
  $('#grd1 table tr').on('blur', ':input', function(event) {
      blurredFrom = event.delegateTarget;
      delayedFn = setTimeout(function() {
          alert('Blurred');
      }, 0);
  });
  $('#grd1 table tr').on('focus', ':input', function(event) {
  //alert(event.delegateTarget);
      if (blurredFrom === event.delegateTarget) {
          clearTimeout(delayedFn);
      }
  });
  </code></pre>
  
  <p>jsfiddle link <a href="http://jsfiddle.net/tridip/dU8sn/96/" rel="nofollow">http://jsfiddle.net/tridip/dU8sn/96/</a>
  please tell me where is the mistake. test this way when click on any text box of first row repeatedly then just click on hello1 text then you will see focus lost occur but it should not be because hello1 is also in first row.</p>
  
  <p>guide me where is the mistake. thanks</p>
  
  <h2>Edit</h2>
  
  <p>bit modify the code but still no luck.</p>
  
  <pre><code>&lt;div id="grd1"&gt;
    &lt;table&gt;
      &lt;tr id="t1"&gt;
        &lt;td tabindex="0"&gt;&lt;span&gt;Hello1&lt;/span&gt;&lt;/td&gt;
        &lt;td tabindex="1"&gt;
          &lt;input /&gt;
        &lt;/td&gt;
        &lt;td tabindex="2"&gt;
          &lt;input /&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="t2"&gt;
        &lt;td tabindex="3"&gt;&lt;span&gt;Hello2&lt;/span&gt;&lt;/td&gt;
        &lt;td tabindex="4"&gt;
          &lt;input /&gt;
        &lt;/td&gt;
        &lt;td tabindex="5"&gt;
          &lt;input /&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  
  var delayedFn, blurredFrom;
  $('#grd1 table tr').on('blur', 'td, input, th', function(event) {
    alert(blurredFrom);
    alert($(this).closest('tr').attr('id'));
    if (blurredFrom !='undefined' &amp;&amp; blurredFrom != $(this).closest('tr').attr('id')) {
          alert('Blurred');
    }
    //blurredFrom = $(this).closest('tr').attr('id');
    //delayedFn = setTimeout(function() {
      //alert('Blurred');
    //}, 0);
  });
  
  $('#grd1 table tr').on('focus', 'td, input, th', function(event) {
  blurredFrom === $(this).closest('tr').attr('id')
    //alert(blurredFrom);
    //if (blurredFrom === $(this).closest('tr').attr('id')) {
      //alert('clr')
      //clearTimeout(delayedFn);
    //}
  });
  </code></pre>
  
  <h2>EDIT</h2>
  
  <p>after spending good time i could build right script what i was looking for.</p>
  
  <pre><code>&lt;table id="myTable"&gt;
     &lt;tr id="t1"&gt;
        &lt;td&gt;
           &lt;span&gt;Hello1&lt;/span&gt;
        &lt;/td&gt;
        &lt;td&gt;
           &lt;input id="c1r1" type="text" value="c1r1" /&gt;
        &lt;/td&gt;
        &lt;td&gt;
           &lt;select&gt;
              &lt;option value="volvo"&gt;Volvo&lt;/option&gt;
              &lt;option value="saab"&gt;Saab&lt;/option&gt;
           &lt;/select&gt;
        &lt;/td&gt;
        &lt;td&gt;
           &lt;input type="checkbox" name="vehicle" value="Car"&gt;I have a car 
        &lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr id="t2"&gt;
        &lt;td&gt;
           Hello2
        &lt;/td&gt;
        &lt;td&gt;
           &lt;input id="c1r2" type="text" value="c1r2" /&gt;
        &lt;/td&gt;
        &lt;td&gt;
           &lt;select&gt;
              &lt;option value="volvo"&gt;Volvo&lt;/option&gt;
              &lt;option value="saab"&gt;Saab&lt;/option&gt;
           &lt;/select&gt;
        &lt;/td&gt;
        &lt;td&gt;
           &lt;input type="checkbox" name="vehicle" value="Car"&gt;I have a car 
        &lt;/td&gt;
     &lt;/tr&gt;
  &lt;/table&gt;
  
  var rowid = '';
  
  $(function () {
      //Click event
  $('#myTable tr').on('click',  function(event) {
  
          if(rowid=='')
      {
          rowid=$(this).closest('tr').attr('id');
      }
  
      if(rowid!='' &amp;&amp; rowid!=$(this).closest('tr').attr('id'))
      {
        rowLostFocus();
        rowid=$(this).closest('tr').attr('id');
      }
  });
  
  
  $("body").click(function(e) {
          if (e.target.id == "myTable" || $(e.target).parents("#myTable").size()) { 
              //alert("Inside table");
          } else { 
             rowLostFocus();
             alert("Outside table");
          }
      });
  });
  
  function rowLostFocus()
  {
     alert('Row '+rowid+' lost focus');
  }
  </code></pre>