JQuery：如何知道表行何时失去焦点跟进

Question

这是问题16885880的后续行动。我没有看到在该问题的背景下提出这个问题的良好机制。我没有50的声望所以我无法评论（这可能不适合作为评论），这不是这个问题的答案。

我的问题：

我正在尝试使用jQuery: How to know when a table row loses focus?的答案，但它似乎不像我编码的那样工作。谁能帮我理解我做错了什么？

使用Firefox Debugger，我已经验证加载JS文件时处理程序代码是否被命中，但是 delayedFn = setTimeout（function（）{和 if 行;并且我的console.log行永远不会被命中。

HTML代码段：

<!-- Table after DataTables gets through with it -->
<table role="grid" id="assetDetails" class="dataTable no-footer">
  <thead>
    <tr role="row">
      <th colspan="1" rowspan="1"
          class="icon sorting_disabled"></th>
      <th colspan="1" rowspan="1"
          class="seqNum sorting_disabled"></th>
      <th colspan="1" rowspan="1"
          class="vendorName sorting_disabled">Vendor Name</th>
      <th colspan="1" rowspan="1"
          class="vendorItemId sorting_disabled">Item ID</th>
      <th colspan="1" rowspan="1"
          class="itemDesc sorting_disabled">Materials Provided</th>
      <th colspan="1" rowspan="1"
          class="itemCost sorting_disabled dollarAmount">$ Amount</th></tr>
  </thead>
  <tbody>
    <tr role="row" class="editable odd" id="detail_1">
      <td class="icon">
        <a href="#"
           onclick="updateDetailsTable('detail_1', UPDATE_TYPE_DELETE)">
          <img class="icon"
               src="/public/images/delete.png" title="Delete Row">
        </a>
      </td>
      <td class="seqNum">1</td>
      <td>
        <input class="vendorName" value="" type="text">
      </td>
      <td>
        <input class="vendorItemId" value="" type="text">
      </td>
      <td>
        <input class="itemDesc" value="" type="text">
      </td>
      <td class="dollarAmount">
        <input pattern="\d{1,9}(\.\d{2})?"
               class="itemCost" value="0" type="text">
      </td>
    </tr>
  </tbody>
</table>

我的jQuery事件处理程序：

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);
  }
});

Answer 1

我已经弄清楚了。我在问题陈述中遗漏的一个细节是，当用户点击“添加行”链接时，或者当服务器提供的表为空时，我使用jQuery DataTables添加新行。

在上面的HTML中，在加载包含处理程序的JS文件之后，DataTables添加了初始行，因为服务器表为空。为了让处理程序工作，我必须像这样修改它：

var delayedFn, blurredRow;  //<-- Changed
$('table').on('blur', 'tr.editable :input', function(event) {  //<-- Changed
  blurredRow= $(event.target).closest("tr").attr("id");  //<-- Changed
  delayedFn = setTimeout(function() {
    var tableId = $(event.target).closest("table").attr("id");  //<-- Changed
    /*
     * 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: blurredRow   = " + blurredRow);  //<-- Changed
    console.log("tr.editable.onblur: tableName    = " + tableName);
    console.log("tr.editable.onblur: functionName = " + functionName);
    window[functionName](blurredRow, UPDATE_TYPE_CHANGE);  //<-- Changed
    /*
     * Timeout value is set to 500 for FireFox.
     * See: http://stackoverflow.com/questions/20747591/
     */
  }, 500);
});
$('table').on('focus', 'tr.editable :input', function(event) {  //<-- Changed
  focusedRow = $(event.target).closest('tr').attr('id');  //<-- Changed
  if (focusedRow === blurredRow) {  //<-- Changed
      clearTimeout(delayedFn);
  }
});