javascript - 转义码输入的 Keyup 问题

Question

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

任何意见或建议都会非常有帮助，非常感谢!

这是我用于点击事件的 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 事件处理程序的数量。

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

所以这是我的建议:

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

与您的问题无关:当用户单击单元格时，您可以编辑内容。之后您永远不会将其设置为不可编辑，因此人们可能想知道为什么您不从一开始就将它们全部设置为可编辑...