帮忙看看代码有没有什么问题呢？ 谢谢大侠
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
</head>
<body>
//头部
<header class="mui-bar mui-bar-nav">
<div class="mui-input-row mui-search">
<input type="search" class="mui-input-clear" placeholder="">
</div>
</header>
//主体
<div class="mui-content mui-scroll-wrapper" id="refreshContainer">
<div class="mui-scroll ">
<ul id="newsListUl" class="mui-table-view "></ul>
</div>
</div>
<script src="js/mui.js"></script>
<script type="text/javascript">
mui.init({
pullRefresh : {
container : "#refreshContainer",
down: {
style:'circle',
color:'#2BD009',
height:50,
auto: true,
contentdown : "下拉可以刷新",
contentover : "释放立即刷新",
contentrefresh : "拉我拉我，正在给你刷新...",
callback : getNewsList
},
up : {
height:50,
auto:false,
contentrefresh : "正在加载...",
contentnomore:'没有更多数据了,先别拉了哈',
callback : getListByPage
}
}
});
//f1=document.getElementById("f1"); //查询 f1.value
var page = 1;
//上拉加载
function getListByPage(){
var _self= this;
mui.getJSON('getlist_yp.asp', {id:page,txt:123}, function(data) {
//mui.alert(data.toString());
if(data.hasOwnProperty("null")){
_self.endPullupToRefresh(true);
return false;
}
//获得服务器响应
for(var row in data){ //组合html
var li=document.createElement("li");
var html="";
html+= '<a href="javascript:clk('+ data[row].id +');">'
html+= '<img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">'
html+= '<div class="mui-media-body">'
html+= data[row].id +" " +data[row].bh
html+= '<p class="mui-ellipsis">'+data[row].pm+'</p>'
html+= '</div>'
html+= '</a>'
li.innerHTML=html;
var att=document.createAttribute("class"); //为新动态创建的元素加入样式 属性
att.value="mui-table-view-cell mui-media";
li.setAttributeNode(att);
document.getElementById("newsListUl").appendChild(li); //追加的方式，更优化
}
page++;
_self.endPullupToRefresh(false);
});
}
//下拉刷新
function getNewsList(){
page = 1;
mui.getJSON('getlist_yp.asp', {id:page,txt:123}, function(data) {
//获得服务器响应
var html="";
for(var row in data){ //组合html
html+= '<li class="mui-table-view-cell mui-media">'
html+= '<a href="javascript:clk('+ data[row].id +');">'
html+= '<img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">'
html+= '<div class="mui-media-body" >'
html+= data[row].id +data[row].bh
html+= '<p class="mui-ellipsis">'+data[row].pm+'</p>'
html+= '</div>'
html+= '</a>'
html+= '</li>'
}
//console.log(html);
document.getElementById("newsListUl").innerHTML=html;
mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
page++;
//重置上拉
mui('#refreshContainer').pullRefresh().refresh(true);
});
}
//打开窗口
function clk(id){
alert(id);
console.log(id);
mui.openWindow({
url : 'info.html',
id : 'info.html',
extras : {
newId : id
}
});
}
</script>
</body>
</html>
4 个回复
冰凌桦
/ 把onclick事件放到li上，并监听li/
mui("#pullrefresh").on('tap', 'li', function(event) {
this.click();
});
b***@163.com (作者) - 默默立个秋
还是不行啊，发现了，点击左侧 很旁边的地方可以，中间一段是被什么遮盖了，什么情况？
b***@163.com (作者) - 默默立个秋
帮忙看看代码有没有什么问题呢？ 谢谢大侠
冰凌桦
你代码中是在 a标签添加的跳转事件，可以试试直接在li上添加onclick=clk('+ data[row].id +')方法，然后在用这个监听：
mui("#refreshContainer").on('tap', 'li', function(event) {
this.click();
});