javascript - 如何使用 javascript/jquery 克隆/复制 html 表
问题描述
我在这里有一个问题,当我单击最近复制的行上的复制按钮时。它不起作用。你们知道如何解决这个问题吗?
这是我的代码
var controller = function(num1) {
$('#copy-' + num1).click(function() {
var $tableBody = $('#table_name').find("tbody"),
$trLast = $tableBody.find("#tr-" + num1),
$trNew = $trLast.clone();
// $trNew.find('input').val('');
$trLast.after($trNew);
console.clear()
// refresh_index();
});
}
function refresh_index() {
$('#table_name > tbody > tr').each(function(i) {
i++;
var select = $(this).find('select');
var text = $(this).find('input');
var button = $(this).find('button');
controller(i);
});
}
refresh_index();
这是我在JSFIDDLE中的代码
解决方案
要将 click 事件附加到动态创建的元素上,请使用委托方法,使用.on()
. 这将允许事件处理稍后添加到正文中的元素。
改变
$('#copy-' + num1).click(function() {
至
$('body').on('click','#copy-'+num1, function() {
$(function(){
var controller = function(num1){
$('body').on('click','#copy-'+num1, function() {
var $tableBody = $('#table_name').find("tbody"),
$trLast = $tableBody.find("#tr-"+num1),
$trNew = $trLast.clone();
// $trNew.find('input').val('');
$trLast.after($trNew);
console.clear()
// refresh_index();
});
}
function refresh_index(){
$('#table_name > tbody > tr').each(function (i) {
i++;
var select = $(this).find('select');
var text = $(this).find('input');
var button = $(this).find('button');
controller(i);
});
}
refresh_index();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table_name">
<thead>
<tr>
<th>No</th>
<th>Item</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr class="trs" id="tr-1">
<td>1</td>
<td>Mouse</td>
<td><button class="copy" id="copy-1">Copy</button></td>
</tr>
<tr class="trs" id="tr-2">
<td>2</td>
<td>Keyboard</td>
<td><button class="copy" id="copy-2">Copy</button></td>
</tr>
<tr class="trs" id="tr-3">
<td>3</td>
<td>Monitor</td>
<td><button class="copy" id="copy-3">Copy</button></td>
</tr>
</tbody>
</table>
推荐阅读
- bash - 在 macOS 上将特定类型的文件添加到文件夹 A 时,自动将它们从文件夹 A 移动到 B
- primefaces - 动态 p:menu 适用于 PrimeFaces 3.5,不适用于 >4.0
- python - 在 Python 中暂停和重新启动视频
- javascript - 改变 div/img 的外观
- html - 对于 html,如何在页面中获取子 URL?
- javascript - 利用 WebIDE 插件中的命令创建一个新文件
- java - 通过循环将对象添加到数组
- javascript - 将外部代码片段包含到 ReactJS 组件中时出现问题
- excel - 搜索一个表然后列并复制列中的数据
- azure - AD 中的 Azure 门户应用程序说证书已过期,即使我更新了它