不同标签绑定不同事件,但事件内容相同问题
分类:
文章
•
2025-06-26 09:42:16
如果同一页面,不管多少标签,只要id相同,并且绑定同一事件,(也就是函数),则再浏览器端都能执行这个事件
如果同一页面,不同id,绑定不同事件(函数不同),但事件涉及内容相同,则在浏览器端不一定都执行这个事件
因为只要事件涉及内容 用js操作过了,那就用过id了(W3C中文的解释“id 属性只能在每个 HTML 文档中出现一次”,意思其实是同一个html文档中同一个ID只能用一次,如果用了多次,问题一般会出来
),则再浏览器里先操作的事件能执行,后边的都不执行,原因是事件涉及相同内容的id冲突;

像上图,两个按钮,做了两个弹框,但弹框里内容是同一个页面,所以,只要先点击啊的按钮,有上边表格数据,后点开的弹框里没有表格数据
解决办法:1要么给两个按钮绑定同一事件
2:在操作每一个按钮事件关闭时,移除自身数据,在加上相关数据标签
2例子:
a.jsp
<p style="display:inline-block;width:25%;text-align:right;">
<a href="javascript:void(0)" class="easyui-linkbutton btn-success"onclick="lxsq()">
个人离校申请</a>
</p>
<p style="display:inline-block;width:15%">
<a href="javascript:void(0)" class="easyui-linkbutton btn-success"
onclick="sqjl()">
申请记录</a>
</p>
<p style="display:inline-block;width:10%;text-align:left;">
<a href="javascript:void(0)" class="easyui-linkbutton " plain="true"
onclick="lxsqjl()">
查看个人离校申请</a>
</p>
<p style="display:inline-block;width:8%;text-align:left;margin-left:10px">
<a href="javascript:void(0)" class="easyui-linkbutton " plain="true" onclick="wsgrxx()">
完善个人信息</a>
</p>
<!--离校申请页面 -->
<div id="lxsq"></div>
<!--申请记录页面 -->
<div id="sqjl"></div>
<!--完善个人信息 -->
<div id="wsgrxx"></div>
<!--查看个人离校申请 -->
<div id="lxsqjl"></div>
<script type="text/javascript">
function sqjl(){
$("#sqjl").dialog({
href: "sqjl.jsp",
title: '申请记录aa',
width: '750',
height:'580',
closed: false,
modal: true,
buttons:[{
text:'关闭',
handler:function(){
$('#sqjl').dialog({
closed:true
});
/* sqjl()根lxsqjl()跳的同一页面,所以在同一个父页面里,
浏览器加载了之后彼此影响,所以,弹出一个框之后,移除弹出框也就删除了加载的内容,然后 在添加弹框,但此时没触发就不能渲染,没加载页面*/
$("#sqjl").remove();
$('#lxsq').after('<div id="sqjl"></div>');
}
}]
})
$(".dialog-button").css("text-align",'center');
}
//查看个人离校申请
function lxsqjl(){
$("#lxsqjl").dialog({
href: "sqjl.jsp",
title: '申请记录aa',
width: '750',
height:'580',
closed: false,
modal: true,
buttons:[{
text:'关闭',
handler:function(){
$("#lxsqjl").dialog({
closed:true
});
$("#lxsqjl").remove();
$('#wsgrxx').after('<div id="lxsqjl"></div>');
}
}]
})
$(".dialog-button").css("text-align",'center');
}
</script>
则随便点击,申请记录aa这个弹框里的表数据都会出来