使用侧滑菜单后，元素上的onclick事件无法执行，a标签无法跳转，为什么？

分类：MUI

侧滑导航

<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <title></title>  
        <script src="js/mui.min.js"></script>  
        <script src="js/template.js"></script>  
        <script src="js/fastclick.js"></script>  
        <script src="js/zepto.min.js"></script>  
        <script src="js/constant.js"></script>  
        <link href="css/mui.min.css" rel="stylesheet" />  
        <link href="css/ews.css" rel="stylesheet" />  
    </head>  

    <body>  
        <!-- 侧滑导航根容器 -->  
        <div class="mui-off-canvas-wrap mui-draggable">  
            <!-- 菜单容器 -->  
            <aside id="offCanvas" class="mui-off-canvas-left">  
                <div class="mui-scroll-wrapper">  
                    <div class="mui-scroll">  
                        <!-- 菜单具体展示内容 -->  
                        <ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">  
                            <li class="mui-table-view-cell">  
                                关于  
                            </li>  
                            <li class="mui-table-view-cell">  
                                完全退出  
                            </li>  
                            <li class="mui-table-view-cell" id="min" onclick="doAlert()">  
                                最小化退出  
                            </li>  
                        </ul>  
                        <div>  
                        </div>  
            </aside>  
            <!-- 主页面容器 -->  
            <div class="mui-inner-wrap">  
                <!-- 主页面标题 -->  
                <header class="mui-bar mui-bar-nav">  
                    <a href="#offCanvas" class="mui-icon mui-icon-bars mui-pull-left"></a>  
                    <h1 class="mui-title">标题</h1>  
                </header>  
                <div class="mui-content mui-scroll-wrapper">  
                    <div class="mui-scroll">  
                        <ul class="mui-table-view" id="page-container">  
                        </ul>  
                    </div>  
                </div>  
                <nav class="mui-bar mui-bar-tab">  
                    <div class="ews-footer">标题</div>  
                </nav>  
            </div>  
            </div>  
            <script type="text/html" id="page-tpl">  
                {{each data as value i}}  
                <li code="{{value.code}}" class="mui-table-view-cell" onclick="openUrl('{{value.code}}')">{{value.name}}<span class="mui-badge" id="{{value.code}}"></span>  
                </li>  
                {{/each}}  
            </script>  
    </body>  

</html>  
<script type="text/javascript" charset="utf-8">  
    function doAlert(){  
        alert(123);  
    }  
    var mask = mui.createMask(function() {}); //callback为用户点击蒙版时自动执行的回调；  

    mui.plusReady(function() {  

        mui.ajax(collectorUrl, {  
            dataType: 'json', //服务器返回json格式数据  
            type: 'post', //HTTP请求类型  
            timeout: 0, //超时时间设置为10秒；  
            success: function(data) {  
                var html = template('page-tpl', {  
                    "data": data  
                });  
                $("#page-container").html(html);  
                polling();  
            },  
            error: function(xhr, type, errorThrown) {  
                console.log("网络异常");  
            }  
        });  

    });  

    mui('#page-container').on('tap', 'li', function(e) {  
        var code = this.getAttribute('code');  
        openUrl(code);  
    });  

    function openUrl(code) {  

        mui.openWindow({  
            url: "view/collector.html",  
            show: {  
                autoShow: true, //页面loaded事件发生后自动显示，默认为true  
                aniShow: "slide-in-right", //页面显示动画，默认为”slide-in-right“；  
                duration: 200 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；  
            },  
            waiting: {  
                autoShow: true, //自动显示等待框，默认为true  
                title: '正在加载...'  
            },  
            extras: {  
                code: code  
            }  
        });  
    }  

    function polling() {  

        mui.ajax(statusUrl, {  
            dataType: 'json', //服务器返回json格式数据  
            type: 'post', //HTTP请求类型  
            timeout: 0, //超时时间设置为10秒；  
            success: function(data) {  
                $.each(data, function(index, item) {  
                    if (item.class == "") {  
                        $("#" + item.key).removeClass();  
                        $("#" + item.key).addClass("mui-badge");  
                        $("#" + item.key).html(item.value);  
                    } else {  
                        if (item.value == "报警") {  
                            plus.push.createMessage("监测点数据超标，请点击查看", "", {  
                                title: "老港镇环境预警"  
                            });  
                        }  
                        $("#" + item.key).removeClass();  
                        $("#" + item.key).addClass("mui-badge");  
                        $("#" + item.key).addClass(item.class);  
                        $("#" + item.key).html(item.value);  
                    }  
                });  

                setTimeout(polling, 120000);  
            },  
            error: function(xhr, type, errorThrown) {  
                console.log("网络异常");  
            }  
        });  
    }  
</script>  

这是完整的页面代码，请问为什么？

2015-01-31 13:10 负责人:无分享