<style>
.tr-click{
background-color: #EFA2A9 ;
}
table tr:hover{
background-color: #EFA2A9 ;
}
</style>
<table class="table">
<tr>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
</table>
<button id="btn">改变表格</button>
<script type="text/javascript" src="jquery/jquery.min.js" ></script>
<script type="application/javascript">
$(function(){
$("tr").click(function(){
alert('123');
$("tr").removeClass("tr-click");
$(this).addClass("tr-click");
})
$("#btn").click(function(){
var html="<tr><td>000</td><td>000</td></tr><tr><td>000</td><td>000</td></tr>";
$(".table").replaceWith("<table>"+html+"</table>");
})
})
</script>
如代码建一个表格,为表格的行设置单击事件,更换背景色,此时单击事件正常。
同时设置一个按钮,通过按钮单击事件使用replaceWith方法替换表格内容,这个时候表格行的单击事件不生效了。
百思不得其解,在浏览器查看了源代码,发现多了<tbody></tbody>标签,但是我设置的单击事件选择器是 tr ,就算多了tbody标签也不应该不生效吧,大佬们帮忙看看是怎么回事,万分感谢。

表格 行的单击事件为何不生效?
- 写回答
- 好问题 0 提建议
- 关注问题
- 邀请回答
-
2条回答 默认 最新
- Print_v 2019-06-11 21:47关注
替换表格内容后要重新注册事件,你注册的这个点击事件是被替换掉的dom,新增的dom没有注册事件,所以点击无效
js部分写成这样应该就可以了。
至于多了个tbody,是由于你没有按照规范写,浏览器自动加上tbody了,表格格式:<script type="application/javascript"> $(function(){ $("tr").click(function(){ alert('123'); $("tr").removeClass("tr-click"); $(this).addClass("tr-click"); }) $("#btn").click(function(){ var html="<tr><td>000</td><td>000</td></tr><tr><td>000</td><td>000</td></tr>"; $(".table").replaceWith("<table>"+html+"</table>"); $("tr").click(function(){ alert('123'); $("tr").removeClass("tr-click"); $(this).addClass("tr-click"); }) }) }) </script>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报