在结合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> 标签可以阻止页面刷新，也能阻止事件冒泡
