在https://www.juhe.cn上找了一个免费的新闻接接口,通过mui.ajax方式获取接口数据,然后用media list的形式显示新闻列表,点击列表中的一项能显示新闻详情,
碰到的问题是列表item上无法绑定tap事件,
如果不用mui.ajax,直接把聚合接口的请求的数据直接放变量或者local storage,是能绑定tap事件的,
不知道怎么解决,SOS
在https://www.juhe.cn上找了一个免费的新闻接接口,通过mui.ajax方式获取接口数据,然后用media list的形式显示新闻列表,点击列表中的一项能显示新闻详情,
碰到的问题是列表item上无法绑定tap事件,
如果不用mui.ajax,直接把聚合接口的请求的数据直接放变量或者local storage,是能绑定tap事件的,
不知道怎么解决,SOS
Trust - 少说废话
ajax默认是异步的,你需要等数据加载完毕,也就是页面渲染完毕,才可以操作相应的dom节点,进行添加事件的操作。附上一个示例:
mui.ajax({
type: "post",
url: "xxx",
data: {},
dataType: "json",
timeout: 10000,
success: function(data) {
var content = ""
for (var i = 0, len1 = data.length; i < len1; i++) {
content += '<li' + data[i].id + '>' + data[i].name + '</li>';
}
document.getElementById("ul").innerHTML = content;
var list = document.querySelectorAll("li");
for (var j = 0, len2 = list.length; j < len2; j++) {
list[j].addEventListener("tap", function() {
var name = this.innerHTML;
console.log(name);
}, false);
}
},
error: function(xhr, type, errorThrown) {
console.log(type);
}
});
熟饭 (作者)
还是我的js基础太弱了,我开始是把绑定事件的代码写在外面的,写在mui.ajax success回调里面就没有这个问题
mui.init();
mui.plusReady(function(){
plus.screen.lockOrientation("portrait-primary");
plus.navigator.setStatusBarBackground("#f7f7f7");
getData();
});
function getData(){
mui.ajax('http://v.juhe.cn/weixin/query?key=fd8998c1ccefd3027d47a635614ba18c', {
data:{},
dataType:'text',
type:'get',
timeout:10000,
success:function(data){
render(data);
},
error:function(xhr,type,errorThrown){
console.log(type);
}
});
}
function render(data){
var json = JSON.parse(data);
var templateData = {
items: json.result.list
};
var html = template('template', templateData);
document.getElementById('list').innerHTML = html;
bindTap();
}
function bindTap(){
mui('.mui-table-view').on('tap', '.mui-table-view-cell', function(){
var url = this.getAttribute('data-url');
mui.openWindow({
url:'news_view.html',
id:'news_view',
extras:{
url: url
}
});
});
}