Bootstrap-Table 中的 JQuery 按键问题：data-toggle="table"

Question

我正在使用引导表 https://bootstrap-table.com/ 我正在尝试验证表中的输入，所以我使用的是 JQuery 按键功能。 但是当我尝试在表格内的输入上使用按键时它不起作用。 我尝试了很多方法，但唯一的方法是从我的表中删除： [data-toggle="table"] ，然后按键再次起作用。 你知道当我使用引导表时我可以做些什么来使用按键功能吗？ 这是我的代码： （我正在使用：https://bootstrap-table.com/ 和 JQuery）

<table id="table_1" data-toggle="table" data-pagination="true">
    <thead>
         <tr>
            <th>
                ID
            </th>
            <th>
                Name
            </th>
         </tr>
    </thead>
    <tbody>
         <tr>
            <td>
                <input id="input_1" type="text" />
            </td>
            <td>
                <input id="input_2" type="text" />
            </td>
         </tr>
    </tbody>
</table>


<script>

$('#input_1').keypress(function() {
    alert('It works!');
});

$('#input_2').keypress(function() {
    alert('It works!');
});

</script>

Answer 1

您可能会遇到 <table> 被 Bootstrap-Table 插件重新渲染的问题。

因此，您的事件正在丢失。

为避免这种情况（如果这是问题），您应该使用以下代码：

$('#table_1).on("keypress", "#input_1", function(e) {
    alert('It works!');
});

对另一个做同样的事情。您也可以将 #table_1 替换为 body 或 document 之类的东西，它可能会起作用。

Answer 2

很难假设看到你的.js，但这里有一个例子。

确保您添加了boostrap-table.css 和boostrap-table.js，而不是：

将此添加到您的 .js 文件中：

$(function () {

  $('#table_1').bootstrapTable();

  $('#input_1').keypress(function() {
      alert('It works!');
  });

  $('#input_2').keypress(function() {
      alert('It works!');
  });

});

这里正在工作example。