html - table表格添加事件,除了第一行都没有响应
本文介绍了html - table表格添加事件,除了第一行都没有响应的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
表格内容如下:
<table id="table" class="table" style="margin-top: 20px;">
<tr>
<td>文件名</td>
<td>文件路径</td>
<td>分类</td>
<td>大小</td>
<td>操作</td>
</tr>
<#list resources as resource>
<tr id="trnode" name="${resource.resource_id}">
<td id="res_id" style="display: none">${resource.resource_id}</td>
<td id="name">${resource.name}</td>
<td>${resource.location}</td>
<td>${resource.creator}</td>
<td>${resource.size}</td>
<td>
<input id="tbbtn" type="button" value="测试">
<a href="#" data-toggle="modal" data-target="#editModal">编辑</a>
<a href="#" data-toggle="modal" data-target="#showModal">查看</a>
<a href="#" id="delbtn" data-toggle="modal" data-target="#deleteModal">删除</a>
</td>
</tr>
</#list>
</table>
为删除添加事件,但是除了第一行数据有响应外,其他都没有响应。
<script>
$(document).ready(function(){
$('#tbbtn').on('click', function(){
alert("123");
})
$('#delbtn').on('click', function(){
alert("123");
})
});
</script>
请问这是什么原因?
解决方案
你使用的选择器是ID选择器。
$('#tbbtn').on('click', function(){
alert("123");
})
$('#delbtn').on('click', function(){
alert("123");
})
在ID选择器中只会ID唯一的元素,所以只会选择一个元素。参考文档
建议你把ID选择器换成CLASS选择器,代码如下:
<#list resources as resource>
<tr id="trnode" name="${resource.resource_id}">
<td id="res_id" style="display: none">${resource.resource_id}</td>
<td id="name">${resource.name}</td>
<td>${resource.location}</td>
<td>${resource.creator}</td>
<td>${resource.size}</td>
<td>
<input class="tbbtn" type="button" value="测试">
<a href="#" data-toggle="modal" data-target="#editModal">编辑</a>
<a href="#" data-toggle="modal" data-target="#showModal">查看</a>
<a href="#" class="delbtn" data-toggle="modal" data-target="#deleteModal">删除</a>
</td>
</tr>
</#list>
$('.tbbtn').on('click', function(){
alert("123");
})
$('.delbtn').on('click', function(){
alert("123");
})
这篇关于html - table表格添加事件,除了第一行都没有响应的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文