父页面调用子页面popover

我的父页面在导航栏里有一个

 <a id="menu" class="mui-action-menu mui-icon mui-icon-plus mui-pull-right" href="#topPopover"></a>  

调用子页面

var menu = document.getElementById("menu");  
        menu.addEventListener("tap",function(e){  
//          mui.toast('asd');  
            var add_devices = null;  
//          if(!add_devices){  
                add_devices = plus.webview.getWebviewById('child');  
//              mui.toast('asd');  
//            }  
            mui.fire(add_devices,'addDevices',{  
                test:'1'  
              });  
        });

子页面的实现应该怎么写呢？
用如下代码没反应，我直接在父页面用下面的代码是没问题的

        <style>  
            #topPopover {  
                position: fixed;  
                top: 16px;  
                right: 6px;  
            }  

            #topPopover .mui-popover-arrow {  
                left: auto;  
                right: 6px;  
            }  

            .mui-popover {  
                height: 300px;  
            }  
        </style>  
        <!--右上角弹出菜单-->  
        <div id="topPopover" class="mui-popover">  
            <div class="mui-popover-arrow"></div>  
            <div class="mui-scroll-wrapper">  
                <div class="mui-scroll">  
                    <ul class="mui-table-view">  
                        <li class="mui-table-view-cell">  
                            <a href="#">Item1</a>  
                        </li>  
                        <li class="mui-table-view-cell">  
                            <a href="#">Item2</a>  
                        </li>  
                    </ul>  
                </div>  
            </div>  
        </div>  
        <script type="text/javascript">  
            window.addEventListener('addDevices',function(e){  
                var self = e.test;  

//              var params = e.detail;  
//              document.getElementById('topPopover').popover().toggle();  
//              mui('.mui-scroll-wrapper').scroll();  
                mui('body').on('shown', '.mui-popover', function(e) {  
                    console.log('shown', e.detail.test);//detail为当前popover元素  
                });  
                mui('body').on('hidden', '.mui-popover', function(e) {  
                    console.log('hidden', e.detail.test);//detail为当前popover元素  
                });  
                mui.toast('self');  
            });  

        </script>  

中间有些测试用的，请忽略啦
我现在在子页面中的函数里调用mui.toast('self');是能正常显示的，就是不知道怎么显示popover
还有，我根据官方文档实现了父页面嵌套子页面的下拉刷新。不知道是不是和这个有关呢？因为我看这俩class都差不多呢。。。。。。。前端弱逼诚心向各位大神求教！
请大神帮帮忙，忙活一宿了