Проблемы с нажатием клавиши JQuery в Bootstrap-Table: data-toggle = "table" - PullRequest
0 голосов
/ 23 января 2019

Я использую Bootstrap Table 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>

Ответы [ 2 ]

0 голосов
/ 23 января 2019

Трудно предположить, что мы не увидим .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!');
  });

});

Здесь работает пример .

0 голосов
/ 23 января 2019

Возможно, у вас проблема с повторным рендерингом <table> с помощью плагина Bootstrap-Table.

Таким образом, ваши события теряются.

Чтобы избежать этого (в случае, если это проблема), вы должны использовать следующий код:

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

И сделать то же самое с другим.Вы можете поменять #table_1 на что-то вроде body или document, и это может сработать.

...