Java首席劝退师
2019-06-11 20:45
采纳率: 100%
浏览 582
已采纳

表格 行的单击事件为何不生效？

<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标签也不应该不生效吧，大佬们帮忙看看是怎么回事，万分感谢。
  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

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>
    评论
    解决 无用
    打赏 举报
查看更多回答(1条)

报告相同问题？

提交

相关推荐 更多相似问题