实现子页面调用父页面去创建tab选项卡
//父文件
<div class="page-content">
<div class="layui-tab tab" lay-filter="xbs_tab" lay-allowclose="false">
<ul class="layui-tab-title">
<li lay-id='1'>首页</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<iframe src='./admin-role.html' frameborder="0" scrolling="yes" class="x-iframe"></iframe>
</div>
</div>
</div>
</div>
//参考里面的active对象里面的方法
//子文件 html部分
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs delEle" data-title="编辑内容" data-id='2' lay-event="edit" data-url="admin-edit.html" style="line-height: 28px;">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" style="line-height: 28px;">删除</a>
</script>
//js
layui.use('element', function(){
var element = layui.element,$ = layui.jquery;
//此方法写的是父元素的操作,增加tab同时跳转到该页面
var active = {
tabAdd: function(url,id,title){
window.parent.layui.element.tabAdd('xbs_tab',{
title: title ,
content: '<iframe tab-id="'+id+'" frameborder="0" src="'+url+'" scrolling="yes" class="x-iframe"></iframe>',
id: id
})
},
tabChange:function(id){
window.parent.layui.element.tabChange('xbs_tab',id)
}
}
//工具栏事件
table.on('tool(test)', function(obj){
var data = obj.data;
var objItem = {'name':'currentItem','val':data}
if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
obj.del();
layer.close(index);
console.log('更新')
});
} else if(obj.event === 'edit'){
utils.operatSession(1,objItem)
//触发事件
$(document).on('click','.delEle',function(){
var datas = $(this);
if($('.layui-tab-title li[lay-id]',window.parent.document).length<=0){
active.tabAdd(datas.attr('data-url'),datas.attr('data-jump'),data.id)
}else{
var isOpen = false;
$.each($('.layui-tab-title li[lay-id]',window.parent.document),function(){
if($(this).attr('lay-id')==datas.attr('data-id')){isOpen=true}
})
if(!isOpen){active.tabAdd(datas.attr('data-url'),datas.attr('data-id'),datas.attr('data-title'))}
}
active.tabChange(datas.attr('data-id'))
})
}
});
});
click首次不触发问题分析:
一般我们增加点击事件是:$('类').on('click',()=>{}),但这里首次点击是不会触发的。这是为什么呢?那要如何解决呢?
因为第一次点击的时候是给当前对象绑定一个click事件,这个click事件要到第二次点击才生效。
我是采用$(document)去找这个类名来绑定这个方法: