如果同一页面,不管多少标签,只要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这个弹框里的表数据都会出来