引用POPUI来实现弹窗效果,且弹窗中的内容可以点击事件
seajs.use(['../js/ui/dialog'],function(){ $('.center-button').bind('click',function(){ var $dlg = $.dialog({ title:'确认/调整九宫格位置', width:995, source: $('#dlg_d1').html() }); $dlg.delegate('.zuobiaoxi td', 'click', function() { $(this).addClass('td_curr').siblings().removeClass('td_curr').parents().siblings().find('td').removeClass('td_curr'); $(this).find('.round').addClass('curr').parents().siblings().find('.round').removeClass('curr'); }) $dlg.delegate('.c-button .cancel','click',function(){ $dlg.close(); }); }); });
上述代码调用了本地的dialog.js文件,可以建立弹窗,弹窗$.dialog返回给var $dlg,然后使用函数delegate给对象$dlg的子元素.zuobiaoxi 绑定click事件:
其中html为:(其实是JavaScript格式)
<script id="dlg_d1" type="text/template"> <div class="mess-dialog"> <div class="dia-content"> <div class="dia-left"><img src="./img/foot-pic.png"></div> <div class="dia-right"> <span>陈道明</span><em>T3-1</em> <p>部门:京东商城——华北区域分公司——配送部——分拣中心管理部——固安一级分公司...</p> </div> <div class="clear"></div> <div class="zuobiaoxi"> <table cellpadding="0" cellspacing="0"> <tr><td><div class="round">6</div>熟练员工</td><td><div class="round">8</div>绩效之星</td><td><div class="round">9</div>熟练员工</td></tr> <tr><td><div class="round">3</div>熟练员工</td><td><div class="round">5</div>绩效之星</td><td class="td_curr"><div class="round curr">7</div>熟练员工</td></tr> <tr><td><div class="round">1</div>熟练员工</td><td><div class="round">2</div>绩效之星</td><td><div class="round">4</div>熟练员工</td></tr> </table> <div class="c-button"> <button class="cancel">取消</button> <button class="sure">确认</button> </div> </div> </div> </div> </script>
delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。