layui子页面触发父页面创建tab选项卡，同时处理click首次不触发的问题

实现子页面调用父页面去创建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)去找这个类名来绑定这个方法：