引用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() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

 

转载于:https://www.cnblogs.com/xiaozhumaopao/p/5893623.html