我有两个表select-player和my-team。我编写了Jquery代码以从一个表中剪切行并将其粘贴到另一表中。但是,当剪切一行并将其粘贴到另一张表时,该功能在该行上不起作用。我在执行函数时尝试console.log()
打印一些内容,但发现将行发送到另一张表后,该函数不会在该行上运行。看一下代码:
$('#select-players tbody tr td span i').on('click',function(e) {
$(this).closest('i').removeclass('fa-plus-square');
$(this).closest('i').addClass('fa-minus-square');
var row = $(this).closest('tr').html();
$('#my-team tbody').append('<tr>' + row + '</tr>');
$(this).closest('tr').remove();
});
//To send row from Table 2 to Table 1:
$('#my-team tbody tr td span i').on('click',function(e) {
$(this).closest('i').removeclass('fa-minus-square');
$(this).closest('i').addClass('fa-plus-square');
var row = $(this).closest('tr').html();
$('#select-players tbody').append('<tr>' + row + '</tr>');
$(this).closest('tr').remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<table class="table table-hover col-md-4" id="select-players">
<thead class="thead-dark">
</thead>
<tbody>
<tr>
<th>1</th>
<td colspan="2">
<span class=""><img src="img/sangakkara.png" alt="" width="40px" height="40px"></span>
<span class="font-weight-bold">Player 1</span>
<span class="font-weight-lighter" style="font-size: smaller;">rhb</span>
</td>
<td>
<span><i class="fa fa-plus-square"></i></span>
</td>
</tr>
</tbody>
</table>
<table class="table table-hover col-md-4" id="my-team">
<thead class="thead-dark">
</thead>
<tbody>
<tr>
<th>1</th>
<td colspan="2">
<span class=""><img src="img/sangakkara.png" alt="" width="40px" height="40px"></span>
<span class="font-weight-bold">Player 2</span>
<span class="font-weight-lighter" style="font-size: smaller;">rhb</span>
</td>
<td>
<span><i class="fa fa-minus-square"></i></span>
</td>
</tr>
</tbody>
</table>