javascript - 将事件处理程序添加到引导表中的输入字段
问题描述
我正在使用引导表。
我的表格包含包含输入字段的单元格。
我尝试将事件处理程序（使用 jquery）添加到这些输入字段，但它似乎不起作用。
如果我将事件处理程序添加到非引导表中，它就可以工作。
下面的代码演示了这个问题。当用户更改上表（引导表）中的输入字段时，不会向控制台写入任何内容。当用户更改下表（非引导表）中的输入字段时，会向控制台写入一条消息。
如何将事件处理程序添加到引导表中的输入字段？
$(document).ready(function() {
console.log('ready');
$('#my_table_1').find('input[type="date"]').change(function() {
console.log('Table 1.Date was changed. Need to check if table is sorted by column C.If so - call the table sort.');
});
$('#my_table_1').find('select').change(function() {
console.log('Table 1.Selection was changed. Need to check if table is sorted by column B.If so - call the table sort.');
});
$('#my_table_2').find('input[type="date"]').change(function() {
console.log('Table 2.Date was changed. Need to check if table is sorted by column C.If so - call the table sort.');
});
$('#my_table_2').find('select').change(function() {
console.log('Table 2.Selection was changed. Need to check if table is sorted by column B.If so - call the table sort.');
});
});<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.4/dist/bootstrap-table.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<span>A Bootstrap table</span>
<table id="my_table_1" data-toggle="table" data-sort-stable="true">
<thead>
<tr>
<th data-sortable="true">A</th>
<th data-sortable="true">B</th>
<th data-sortable="true">C</th>
<th data-sortable="false">D</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<select>
<option val="112">A</option>
<option val="2">B</option>
<option val="356" selected>C</option>
</select>
</td>
<td><input type="date" value="2018-07-22"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>123</td>
<td>
<select>
<option val="1" selected>A</option>
<option val="2">B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-07-22"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>56</td>
<td>
<select>
<option val="1">A</option>
<option val="2" selected>B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-08-23"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>14</td>
<td>
<select>
<option val="1">A</option>
<option val="2" selected>B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-07-23"></td>
<td><input type="checkbox"></td>
</tr>
</tbody>
</table>
<!------------------------------------------------------------------->
<hr>
<span>A Non Bootstrap table</span>
<table id="my_table_2">
<thead>
<tr>
<th data-sortable="true">A</th>
<th data-sortable="true">B</th>
<th data-sortable="true">C</th>
<th data-sortable="false">D</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<select>
<option val="112">A</option>
<option val="2">B</option>
<option val="356" selected>C</option>
</select>
</td>
<td><input type="date" value="2018-07-22"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>123</td>
<td>
<select>
<option val="1" selected>A</option>
<option val="2">B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-07-22"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>56</td>
<td>
<select>
<option val="1">A</option>
<option val="2" selected>B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-08-23"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>14</td>
<td>
<select>
<option val="1">A</option>
<option val="2" selected>B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-07-23"></td>
<td><input type="checkbox"></td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.4/dist/bootstrap-table.min.js"></script>解决方案
你需要在底部添加你的脚本，而不是在表格 html 的顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.4/dist/bootstrap-table.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<title>sorted table</title>
</head>
<body>
<span>A Bootstrap table</span>
<table id="my_table_1" data-toggle="table" data-sort-stable="true">
<thead>
<tr>
<th data-sortable="true">A</th>
<th data-sortable="true">B</th>
<th data-sortable="true">C</th>
<th data-sortable="false">D</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><select>
<option val="112">A</option>
<option val="2">B</option>
<option val="356" selected>C</option>
</select>
</td>
<td><input type="date" value="2018-07-22"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>123</td>
<td><select>
<option val="1" selected>A</option>
<option val="2">B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-07-22"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>56</td>
<td><select>
<option val="1">A</option>
<option val="2" selected>B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-08-23"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>14</td>
<td><select>
<option val="1">A</option>
<option val="2" selected>B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-07-23"></td>
<td><input type="checkbox"></td>
</tr>
</tbody>
</table>
<!------------------------------------------------------------------->
<hr>
<span>A Non Bootstrap table</span>
<table id="my_table_2">
<thead>
<tr>
<th data-sortable="true">A</th>
<th data-sortable="true">B</th>
<th data-sortable="true">C</th>
<th data-sortable="false">D</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><select>
<option val="112">A</option>
<option val="2">B</option>
<option val="356" selected>C</option>
</select>
</td>
<td><input type="date" value="2018-07-22"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>123</td>
<td><select>
<option val="1" selected>A</option>
<option val="2">B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-07-22"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>56</td>
<td><select>
<option val="1">A</option>
<option val="2" selected>B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-08-23"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>14</td>
<td><select>
<option val="1">A</option>
<option val="2" selected>B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-07-23"></td>
<td><input type="checkbox"></td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.4/dist/bootstrap-table.min.js"></script>
<script>
$(document).ready(function() {
console.log('ready');
$('#my_table_1').find('input[type="date"]').change(function() {
console.log('Table 1.Date was changed. Need to check if table is sorted by column C.If so - call the table sort.');
});
$('#my_table_1').find('select').change(function() {
console.log('Table 1.Selection was changed. Need to check if table is sorted by column B.If so - call the table sort.');
});
$('#my_table_2').find('input[type="date"]').change(function() {
console.log('Table 2.Date was changed. Need to check if table is sorted by column C.If so - call the table sort.');
});
$('#my_table_2').find('select').change(function() {
console.log('Table 2.Selection was changed. Need to check if table is sorted by column B.If so - call the table sort.');
});
});
</script>
</body>
</html>推荐阅读
- android - 如何为工具栏设置我自己的菜单和返回图标？
- sql - 基于前一行结果的递归公式
- java - 无法通过 Tomcat 进行 FTP XML 下载
- javascript - 在网格中查找下一个有效单元格
- python - 为什么这个 python 代码似乎用相同的数字序列填充所有列表条目？
- html - 我在 AWS S3 上托管了简单的 HTML CSS 页面作为网站，但在实时网页上，文本“-”中的任何地方都显示为“â^”字符。我
- json - 如何通过在flutter中从json文件中获取来通过url播放视频
- sql - 如何在 Postgres 的 xml 列中索引元素的名称
- php - ParameterNotFound：缺少对在 DoctrineMongoDBBundle 中使用 staticphp 作为映射类型的依赖
- excel - 用特定值填充空白单元格超过 100,000 行