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

Question

我正在使用 Bootstrap Table https://bootstrap-table.com/ 我正在尝试验证 table 中的输入，因此我正在使用 JQuery 按键功能。但是当我尝试在 table 内的输入上使用按键时，它不起作用。我尝试了很多方法，但唯一的方法是从我的 table 中删除：[data-toggle="table"]，然后按键再次起作用。你知道我在使用 bootstrap 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

您可能遇到 Bootstrap-Table 插件重新呈现 <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。

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

Problems with JQuery keypress in Bootstrap-Table: data-toggle="table"

jquery

bootstrap-table