下拉刷新，ul中的li设置点击事件

分类：MUI

在下拉刷新中的ul的子标签li,设置点击事件，但是发现只有点击屏幕的左边才会触动点击事件，点击li的其他地方，没有任何反应。

2016-08-09 16:29 负责人:无分享

2 个回复

赵梦欢 - 专注前端，乐于分享！

贴代码说话

z***@qq.com (作者)

<!DOCTYPE html>

<html>

<head>  

    <meta charset="utf-8">  

    <title>Hello MUI</title>  

    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  

    <meta name="apple-mobile-web-app-capable" content="yes">  

    <meta name="apple-mobile-web-app-status-bar-style" content="black">  



    <link rel="stylesheet" href="../css/mui.min.css">  

</head>  



<body>  

    <!--下拉刷新容器-->  

    <div id="pullrefresh" class="mui-content mui-scroll-wrapper">  

        <div class="mui-scroll">  

            <!--数据列表-->  

            <ul class="mui-table-view mui-table-view-chevron">  



            </ul>  

        </div>  

    </div>  

    <script src="../js/mui.min.js"></script>  

    <script>  

        mui.init({  

            pullRefresh: {  

                container: '#pullrefresh',  

                down: {  

                    callback: pulldownRefresh  

                },  

                up: {  

                    contentrefresh: '正在加载...',  

                    callback: pullupRefresh  

                }  

            }  

        });  

        /**  

         * 下拉刷新具体业务实现  

         */  

        function pulldownRefresh() {  

            setTimeout(function() {  

                var table = document.body.querySelector('.mui-table-view');  

                var cells = document.body.querySelectorAll('.mui-table-view-cell');  

                for (var i = cells.length, len = i + 3; i < len; i++) {  

                    var li = document.createElement('li');  

                    li.className = 'mui-table-view-cell';  

                    li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';  

                    //下拉刷新，新纪录插到最前面；  

                    table.insertBefore(li, table.firstChild);  

                }  

                mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed  

            }, 1500);  

        }  

        var count = 0;  

        /**  

         * 上拉加载具体业务实现  

         */  

        function pullupRefresh() {  

            setTimeout(function() {  

                mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。  

                var table = document.body.querySelector('.mui-table-view');  

                var cells = document.body.querySelectorAll('.mui-table-view-cell');  

                for (var i = cells.length, len = i + 20; i < len; i++) {  

                    var li = document.createElement('li');  

                    li.className = 'mui-table-view-cell';  

                    li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';  

                    table.appendChild(li);  

                }  



                var oLis = document.getElementsByTagName('li');  

                for (var j = 0 ; j < oLis.length ; j++) {  

                    var oLi = oLis[j];  

                    oLi.onclick = function(){  

                        console.log('dha');  

                    }  



                }  

            }, 1500);  

        }  

        if (mui.os.plus) {  

            mui.plusReady(function() {  

                setTimeout(function() {  

                    mui('#pullrefresh').pullRefresh().pullupLoading();  

                }, 1000);  



            });  

        } else {  

            mui.ready(function() {  

                mui('#pullrefresh').pullRefresh().pullupLoading();  

            });  

        }  



        function onclickUl(){  

            console.log('xix');  

        }  

    </script>  

</body>

</html>

2016-08-09 16:40

z***@qq.com (作者)

这个是个大问题~~~刚打开的时候可以，然后你在刷新一下浏览器就不可以了。

该问题目前已经被锁定, 无法添加新回复

下拉刷新，ul中的li设置点击事件

2 个回复

公告

相关问题

下拉刷新，ul中的li设置点击事件

与内容相关的链接

2 个回复

公告

相关问题