不同标签绑定不同事件,但事件内容相同问题

本文探讨了JavaScript中同一页面内元素ID重复导致的事件处理问题及解决方案,特别是在使用jQuery进行DOM操作时如何避免因ID冲突引发的问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

如果同一页面,不管多少标签,只要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"οnclick="lxsq()">

     个人离校申请</a> 
</p>

<p style="display:inline-block;width:15%">
      <a href="javascript:void(0)" class="easyui-linkbutton btn-success" οnclick="sqjl()">

      申请记录</a> 
</p>

<p style="display:inline-block;width:10%;text-align:left;">
    <a href="javascript:void(0)" class="easyui-linkbutton " plain="true" οnclick="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" οnclick="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这个弹框里的表数据都会出来

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值