代码如下
ui中的li是动态添加的，我现在想点击li把id传到别下一个页面上去，但是加了点击事件不行，点不过去，求大神指教，我是新手，刚接触hbuilder还没有一个月
<!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">
<style>
html,
body {
background-color: #efeff4;
}
.mui-bar~.mui-content .mui-fullscreen {
top: 44px;
height: auto;
}
.mui-pull-top-tips {
position: absolute;
top: -20px;
left: 50%;
margin-left: -25px;
width: 40px;
height: 40px;
border-radius: 100%;
z-index: 1;
}
.mui-bar~.mui-pull-top-tips {
top: 24px;
}
.mui-pull-top-wrapper {
width: 42px;
height: 42px;
display: block;
text-align: center;
background-color: #efeff4;
border: 1px solid #ddd;
border-radius: 25px;
background-clip: padding-box;
box-shadow: 0 4px 10px #bbb;
overflow: hidden;
}
.mui-pull-top-tips.mui-transitioning {
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
}
.mui-pull-top-tips .mui-pull-loading {
/*-webkit-backface-visibility: hidden;
-webkit-transition-duration: 400ms;
transition-duration: 400ms;*/
margin: 0;
}
.mui-pull-top-wrapper .mui-icon,
.mui-pull-top-wrapper .mui-spinner {
margin-top: 7px;
}
.mui-pull-top-wrapper .mui-icon.mui-reverse {
/*-webkit-transform: rotate(180deg) translateZ(0);*/
}
.mui-pull-bottom-tips {
text-align: center;
background-color: #efeff4;
font-size: 15px;
line-height: 40px;
color: #777;
}
.mui-pull-top-canvas {
overflow: hidden;
background-color: #fafafa;
border-radius: 40px;
box-shadow: 0 4px 10px #bbb;
width: 40px;
height: 40px;
margin: 0 auto;
}
.mui-pull-top-canvas canvas {
width: 40px;
}
.mui-slider-indicator.mui-segmented-control {
background-color: #efeff4;
}
</style>
</head>
<body>
<div class="mui-content">
<div id="slider" class="mui-slider mui-fullscreen">
<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<div class="mui-scroll">
<a id="zxlist" class="mui-control-item mui-active" href="#item1mobile">
最新
</a>
<a id="phlist" class="mui-control-item" href="#item2mobile">
组队
</a>
<a id="wdlist" class="mui-control-item" href="#item3mobile">
问答
</a>
</div>
</div>
<div class="mui-slider-group">
<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
<div id="scroll1" class="mui-scroll-wrapper">
<div class="mui-scroll" id="zxdiv">
<ul class="mui-table-view" id="zxul" >
</ul>
</div>
</div>
</div>
<div id="item2mobile" class="mui-slider-item mui-control-content" >
<div class="mui-scroll-wrapper">
<div class="mui-scroll" id="phdiv">
<ul class="mui-table-view" id="phul">
</ul>
</div>
</div>
</div>
<div id="item3mobile" class="mui-slider-item mui-control-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll" id="wddiv">
<ul class="mui-table-view" id="wdul">
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/Url.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/mui.pullToRefresh.js"></script>
<script src="../js/mui.pullToRefresh.material.js"></script>
<script>
mui.init();
(function($) {
//阻尼系数
var deceleration = mui.os.ios ? 0.003 : 0.0009;
$('.mui-scroll-wrapper').scroll({
bounce: false,
indicators: true, //是否显示滚动条
deceleration: deceleration
});
var zxlist;
var phlist;
var wdlist;
mui.plusReady(function() {
var self1 = plus.webview.currentWebview();
var zx = self1.zxid;
var ph = self1.phid;
var wd = self1.wdid;
var zxfirst = true;
var wdfirst = true;
var phfirst = true;
zxlist = document.getElementById("zxlist");
phlist = document.getElementById("phlist");
wdlist = document.getElementById("wdlist");
zxdown(zx);
zxlist.addEventListener('tap', function() {
zxdown(zx);
});
wdlist.addEventListener('tap', function() {
wddown(wd);
});
phlist.addEventListener('tap', function() {
phdown(ph);
});
//循环初始化所有下拉刷新，上拉加载。
$.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
$(pullRefreshEl).pullToRefresh({
down: {
callback: function() {
var self = this;
setTimeout(function() {
// var ul = self.element.querySelector('.mui-table-view');
// ul.insertBefore(createFragment(ul, index, 10, true), ul.firstChild);
self.endPullDownToRefresh();
}, 1000);
}
},
up: {
callback: function() {
var self = this;
setTimeout(function() {
// var ul = self.element.querySelectorAll('.mui-table-view');
// ul.appendChild(createFragment(ul, index, 5));
self.endPullUpToRefresh();
}, 1000);
}
}
});
});
var li;
var fragment = document.createDocumentFragment();
var createFragment = function(ul, index, count, reverse) {
return fragment;
}
var createtime;
function zxdown(tid, page) {
mui.ajax(Url.ip + Url.getLmBy, {
data: {
tid: tid,
cpage: page
},
dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒；
success: function(data) {
var result = data.rows;
console.log(JSON.stringify(data));
for (var i = 0; i < result.length; i++) {
console.log(JSON.stringify(result[i]));
li = document.createElement('li');
createtime = (result[i].createtime + "").substring(0, 10);
li.innerHTML = '<li class="mui-table-view-cell mui-media" onclick = "opennew(' + result[i].cid + ')" >' +
'<a href="javascript:;">' +
'<img class="mui-media-object mui-pull-left" src="' + Url.home + Url.icon + result[i].icon + '">' +
'<div class="mui-media-body">' +
result[i].title +
// '<p class="mui-ellipsis">' +
// '能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？' +
// '</p>' +
'<div class="mui-ellipsis mui-h5">' +
createtime +
'<span class="mui-ellipsis" style="margin-left: 0.5em;">' +
'<img src="' + Url.home + Url.icon + result[i].icon + '" style="width: 20px; height: 12px;/>' +
'<span style="margin-left: 0.5em;">' +
result[i].hf +
'</span>' +
'</span>' +
'<span style=" margin-left: 0.5em ;">' +
'<img src="' + Url.home + Url.icon + result[i].icon + '" style="width: 12px; height: 12px;/>' +
'<span style="margin-left: 0.5em;">' +
result[i].hp +
'</span>' +
'</span>' +
'</div>' +
'</div>' +
'</a>' +
'</li>';
fragment.appendChild(li);
}
if (zxfirst) {
var list = document.getElementById("zxdiv");
var self = $(list);
var ul = document.getElementById("zxul");
ul.insertBefore(createFragment(ul, 0, 10, true), ul.firstChild);
zxfirst = false;
}
},
error: function(xhr, type, errorThrown) {}
});
}
function wddown(tid, page) {
mui.ajax(Url.ip + Url.getLmBy, {
data: {
tid: tid,
cpage: page
},
dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒；
success: function(data) {
var result = data.rows;
console.log(JSON.stringify(data));
for (var i = 0; i < result.length; i++) {
console.log(JSON.stringify(result[i]));
li = document.createElement('li');
createtime = (result[i].createtime + "").substring(0, 10);
li.innerHTML = '<li class="mui-table-view-cell mui-media" onclick = "opennew(' + result[i].cid + ')" >' +
'<a href="javascript:;">' +
'<img class="mui-media-object mui-pull-left" src="' + Url.home + Url.icon + result[i].icon + '">' +
'<div class="mui-media-body">' +
result[i].title +
'<div class="mui-ellipsis mui-h5">' +
createtime +
'<span class="mui-ellipsis" style="margin-left: 0.5em;">' +
'<img src="' + Url.home + Url.icon + result[i].icon + '" style="width: 20px; height: 12px;/>' +
'<span style="margin-left: 0.5em;">' +
result[i].hf +
'</span>' +
'</span>' +
'<span style=" margin-left: 0.5em ;">' +
'<img src="' + Url.home + Url.icon + result[i].icon + '" style="width: 12px; height: 12px;/>' +
'<span style="margin-left: 0.5em;">' +
result[i].hp +
'</span>' +
'</span>' +
'</div>' +
'</div>' +
'</a>' +
'</li>';
fragment.appendChild(li);
}
if (wdfirst) {
var list = document.getElementById("wddiv");
var self = $(list);
var ul = document.getElementById("wdul");
ul.insertBefore(createFragment(ul, 1, 10, true), ul.firstChild);
wdfirst = false;
}
},
error: function(xhr, type, errorThrown) {}
});
}
function phdown(tid, page) {
mui.ajax(Url.ip + Url.getLmBy, {
data: {
tid: tid,
cpage: page
},
dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒；
success: function(data) {
var result = data.rows;
console.log(JSON.stringify(data));
for (var i = 0; i < result.length; i++) {
console.log(JSON.stringify(result[i]));
li = document.createElement('li');
createtime = (result[i].createtime + "").substring(0, 10);
li.innerHTML = '<li class="mui-table-view-cell mui-media" onclick = "opennew(' + result[i].cid + ')">' +
'<a href="javascript:;">' +
'<img class="mui-media-object mui-pull-left" src="' + Url.home + Url.icon + result[i].icon + '">' +
'<div class="mui-media-body">' +
result[i].title +
'<div class="mui-ellipsis mui-h5">' +
createtime +
'<span class="mui-ellipsis" style="margin-left: 0.5em;">' +
'<img src="' + Url.home + Url.icon + result[i].icon + '" style="width: 20px; height: 12px;/>' +
'<span style="margin-left: 0.5em;">' +
result[i].hf +
'</span>' +
'</span>' +
'<span style=" margin-left: 0.5em ;">' +
'<img src="' + Url.home + Url.icon + result[i].icon + '" style="width: 12px; height: 12px;/>' +
'<span style="margin-left: 0.5em;">' +
result[i].hp +
'</span>' +
'</span>' +
'</div>' +
'</div>' +
'</a>' +
'</li>';
fragment.appendChild(li);
}
if (phfirst) {
var list = document.getElementById("phdiv");
var self = $(list);
var ul = document.getElementById("phul");
ul.insertBefore(createFragment(ul, 2, 10, true), ul.firstChild);
phfirst = false;
}
},
error: function(xhr, type, errorThrown) {}
});
}
function opennew(id) {
mui.openWindow({
url: 'shequ_xingqing.html',
id: 'info.html',
extras: {
cid: id
}
});
}
});
})(mui);
</script>
</body>
</html>
5 个回复
1***@qq.com
解决了吗 我也遇到了这个问题 好坑啊 找了好久了
奋斗中
mui的事件管理第一个就是，下边有个自定义详解，但是我没法在电脑上调试一直出plus is not defined
1***@qq.com
下个模拟器调试啊
2017-08-01 16:16
1***@qq.com
还有怎么弄的啊 我按照那个来写 也不得行啊
2017-08-01 16:24
奋斗中
你的可以了吗
2017-08-02 08:50
5***@qq.com
把id写在li上获取
五叶神 - 世界上没有免费的午餐，也不要有一颗贪婪的心
jquery的on方法没用过么？mui的on方法是一样的用法，监听已存在父级元素的点击事件；
另外这样for循环每次操作dom对象添加li是不合理的，消耗资源，应该for或者js模板引擎组装好字符串后直接用js的insertAdjacentHTML 方法插入所有li结构
勇敢的心_ - 始于1994
仿照你的代码写出来了,有没有上拉加载的,加我QQ,谢谢大神,1106935565