title: JQuery: How to know when a table row loses focus follow-up
body: <p>This is a follow-up to question 16885880. I did not see a good mechanism for asking this question within the context of that question. I don't have a 50 Reputation so I can't comment (and this would probably be inappropriate as a comment, anyway), and this is not an answer to that question.</p>
  
  <p>My question:</p>
  
  <p>I'm trying to use the answer to <a href="https://stackoverflow.com/questions/16885880">jQuery: How to know when a table row loses focus?</a>, but it does not seem to work the way I've coded it.  Can anyone help me understand what I'm doing wrong?</p>
  
  <p>Using Firefox Debugger, I've verified that the handler code is hit when the JS file is loaded, but breakpoints at the <strong>delayedFn = setTimeout(function() {</strong> and <strong>if (blurredInput === event.delegateTarget) {</strong> lines are never hit when the inputs in my row are entered, updated or exited; and my console.log lines are never hit.</p>
  
  <p>HTML Snippet:</p>
  
  <pre><code>&lt;!-- Table after DataTables gets through with it --&gt;
  &lt;table role="grid" id="assetDetails" class="dataTable no-footer"&gt;
    &lt;thead&gt;
      &lt;tr role="row"&gt;
        &lt;th colspan="1" rowspan="1"
            class="icon sorting_disabled"&gt;&lt;/th&gt;
        &lt;th colspan="1" rowspan="1"
            class="seqNum sorting_disabled"&gt;&lt;/th&gt;
        &lt;th colspan="1" rowspan="1"
            class="vendorName sorting_disabled"&gt;Vendor Name&lt;/th&gt;
        &lt;th colspan="1" rowspan="1"
            class="vendorItemId sorting_disabled"&gt;Item ID&lt;/th&gt;
        &lt;th colspan="1" rowspan="1"
            class="itemDesc sorting_disabled"&gt;Materials Provided&lt;/th&gt;
        &lt;th colspan="1" rowspan="1"
            class="itemCost sorting_disabled dollarAmount"&gt;$ Amount&lt;/th&gt;&lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr role="row" class="editable odd" id="detail_1"&gt;
        &lt;td class="icon"&gt;
          &lt;a href="#"
             onclick="updateDetailsTable('detail_1', UPDATE_TYPE_DELETE)"&gt;
            &lt;img class="icon"
                 src="/public/images/delete.png" title="Delete Row"&gt;
          &lt;/a&gt;
        &lt;/td&gt;
        &lt;td class="seqNum"&gt;1&lt;/td&gt;
        &lt;td&gt;
          &lt;input class="vendorName" value="" type="text"&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;input class="vendorItemId" value="" type="text"&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;input class="itemDesc" value="" type="text"&gt;
        &lt;/td&gt;
        &lt;td class="dollarAmount"&gt;
          &lt;input pattern="\d{1,9}(\.\d{2})?"
                 class="itemCost" value="0" type="text"&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>My jQuery Event Handler:</p>
  
  <pre><code>var delayedFn, blurredInput;
  $("tr.editable").on("blur", ":input", function(event) {
    blurredInput = event.delegateTarget;
    delayedFn = setTimeout(function() {
      var tableId = $(blurredInput).closest("table").attr("id");
      var rowId = $(blurredInput).closest("tr").attr("id");
      /*
       * Get the name of the function we want to call. The functions are:
       *   + updateDetailsTable
       *   + updateDisposalsTable
       */
      // Skip the leading "asset" portion of the table ID.
      var tableName = tableId.substr(5);
      var functionName = "update" + tableName + "Table";
      console.log("tr.editable.onblur: tableId      = " + tableId);
      console.log("tr.editable.onblur: rowId        = " + rowId);
      console.log("tr.editable.onblur: tableName    = " + tableName);
      console.log("tr.editable.onblur: functionName = " + functionName);
      window[functionName](rowId, UPDATE_TYPE_CHANGE);
      /*
       * Timeout value is set to 500 for FireFox.
       * See: https://stackoverflow.com/questions/20747591/
       */
    }, 500);
  });
  $('tr.editable').on('focus', ':input', function(event) {
    if (blurredInput === event.delegateTarget) {
        clearTimeout(delayedFn);
    }
  });
  </code></pre>