转义码输入的按键问题

Question

我正在编写一个页面以从数据库表中提取信息并将其放入 HTML 表中。然后，我使用 jQuery 使任何 <td> 单元格在被单击时可编辑，现在我尝试使用 jQuery keyup 函数来检测可编辑单元格何时被编辑，然后使用 ajax 使用编辑后的信息更新数据库。当按下数字、字母和空格键时，keyup 会启动，但由于某种原因，当按下退格键、删除键或回车键时，它不会启动。我不确定我的代码是否有错误或可能是什么原因造成的。

任何cmets或建议都会非常有帮助，非常感谢！

这是我用于单击事件的 jQuery，然后也用于 keyup 以及一个快速表格示例：

$('td').click(function() {
  var val = ($(this).siblings().first().text());
  var col = $(this).parent().children().index($(this));

  $(this).prop('contenteditable', true);

  $(this).keyup(function() {
    $.ajax({
        method: "POST",
        url: "updatedatabase.php",
        data: {
          content: $(this).text(),
          date: val
        }
      })
      .done(function(msg) {
        alert("Data Saved: " + msg);
      });
  });
});

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  font-size: 90%;
}
th, td {
  padding: 8px;
}
td {
  text-align: center;
}
table {
  margin: 0 auto;
}
td:click {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th></th>
    <th>22oz Dark</th>
    <th>12ct 4oz Dark</th>
  </tr>
  <tr>
    <th>2016-01-01</th>
    <td>9785</td>
    <td>2478</td>
  </tr>
  <tr>
    <th>2016-01-02</th>
    <td>8754</td>
    <td>2136</td>
  </tr>
  <tr>
    <th>2016-01-03</th>
    <td>13587</td>
    <td>2203</td>
  </tr>
  <tr>
    <th>2016-01-04</th>
    <td>14111</td>
    <td>3297</td>
  </tr>
  <tr>
    <th>2016-01-05</th>
    <td>13212</td>
    <td>3101</td>
  </tr>
  <tr>
    <th>2016-01-06</th>
    <td>16335</td>
    <td>3299</td>
  </tr>
  <tr>
    <th>2016-01-07</th>
    <td>15421</td>
    <td>3100</td>
  </tr>
</table>

Answer 1

要获取更改，您会发现input 事件很有用：它甚至会在通过鼠标或上下文菜单进行的更改时触发（想想复制/粘贴等）。

您还应该明确地从外部事件处理程序中取出内部事件处理程序。正如您现在所拥有的，每次单击同一个 td 元素时，您将累积 keyup 事件处理程序的数量。

另外，我认为您不希望用户更改第一列，因为它包含您发送到服务器的密钥。

所以这是我的建议：

// exclude first column from jQuery selection:
$('td').not(':first').click(function() {
  $(this).prop('contenteditable', true);
});

// Use input event, and define it outside of above event handler:
$('td').on('input', function() {
  console.log('event');
  $.ajax({
    method: "POST",
    url: "updatedatabase.php",
    data: {
      content: $(this).text(),
      date: $(this).siblings().first().text() // calculate on-the-spot
    }
  })
  .done(function(msg) {
    alert("Data Saved: " + msg);
  });
});

与您的问题无关：当用户单击单元格时，您可以编辑内容。之后你永远不会让它不可编辑，所以有人可能想知道为什么你不从一开始就让它们都可编辑......