熟饭
熟饭
  • 发布:2015-12-30 11:26
  • 更新:2017-02-26 17:44
  • 阅读:3047

ajax获取聚合数据显示图文列表,列表元素上无法绑定top事件

分类:MUI

在https://www.juhe.cn上找了一个免费的新闻接接口,通过mui.ajax方式获取接口数据,然后用media list的形式显示新闻列表,点击列表中的一项能显示新闻详情,

碰到的问题是列表item上无法绑定tap事件,
如果不用mui.ajax,直接把聚合接口的请求的数据直接放变量或者local storage,是能绑定tap事件的,

不知道怎么解决,SOS

2015-12-30 11:26 负责人:无 分享
已邀请:
微信应用开发

微信应用开发

我也遇到同样的问题,动态加载的数据,怎么才能再mui.init()呢?

微信应用开发

微信应用开发

我在电脑浏览器上是可以显示列表数据的,但是到手机浏览器上面就不显示列表数据了,这是为什么呢?

thyiad

thyiad

为什么不能绑定事件?

用on来绑定

无所事事瞎折腾

无所事事瞎折腾

等数据加载完了再绑定,setTimeout

Trust

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  
            }  
        });  
    });  
}
  • Trust

    对的啊,因为ajax默认是异步的,所以你需要在节点创建以后才可以获取到它,对它进行操作。

    2016-01-23 22:19

NewsNing

NewsNing - 天行键

我是每渲染一个的同时找到它添加tap事件

汇智思远

汇智思远

虽然是很老的帖子了,不过为了世界和平,为了不要其他新手被误导,我还是说几句吧

使用委托事件 delegate 绑定监听,Hello mui 中就有相关代码,多看看官方的文档吧。。

  • NewsNing

    哈哈,现在监听列表项的基本上是用委托,mui.on你可以试试

    2017-03-01 15:19

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