Layui 自动生成DOM

在结合layui 使用时，遇到了一个很神奇的问题，暂时没弄清楚问题出在什么地方，先记下
直接使用没有问题，但是放在layui 内就不行

<!--侧边导航栏，产生事件-->
<div class="layui-side layui-bg-black">
  <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="menu" style="margin-right: 10px;">           
    <li class="layui-nav-item">
      <a href="javascript:;">str1</a>
    </li>
  </ul>
</div>

<!--最终DOM 元素被创建到这里-->
<div class="layui-body layui-tab-brief" style="padding: 20px; background-color: #F2F2F2;">
  <div id="imgLoading" style="text-align: center; display: none">
    <img style="margin: auto" src="/src/layui/images/face/30.gif" alt="加载中"/><br/>loading...
  </div>
  <div id="mainContainer">
  </div>
</div>


<script>
// use layui.element
layui.use('element',
  () => {
    var element = layui.element;
    // 事件监听
    element.on('nav(nav)',
      (elem) => {
        console.log(elem.text());
        // layer.msg(elem.text());
        switch (elem.text()) {  // 事件来源，这里写的不漂亮，以后还得再调整下
          case 'str1':
            loadDuty(); 
            break;
          default:
            break;
        }
      });
});

// 加载器
var loadElement = (callback) => {
  $('#imgLoading').show();
  console.log('加载开始');
  var runAsyn = () => {
    var defer = $.Deferred();
    // var p = new Promise();
    callback(defer);
    return defer;
  }
  runAsyn(callback).then(() => {
    $('#imgLoading').hide();
    console.log('隐藏加载框');
  });
}

// 加载模块Duty
var loadDuty = () => {
  loadElement((defer) => {
    setTimeout(function() {
      $('#mainContainer').empty();
      $('#mainContainer').append('<div>123</div>');
        defer.resolve();
      },
    2000);
  });
}
</script>

千万不要忘记：<a href='javascript:;'></a> 标签可以阻止页面刷新，也能阻止事件冒泡