Salazar
Salazar
  • 发布:2017-06-28 17:16
  • 更新:2017-06-29 11:11
  • 阅读:2405

动态添加列表数据,怎样去监听每条列表的点击事件,获取所点击条目中的所有数据?

分类:MUI

UI:


代码:

<!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>  
        <div class="mui-content">  
            <div style="height: 100px; background: #00ff00;"></div>  
            <div style="background: gray;padding: 10px;">  
                產品搜索結果  
            </div>  
            <font id="middle-content"></font>  
            <ul class="mui-table-view">  

            </ul>  
        </div>  

        <script src="js/mui.min.js"></script>  
        <script type="text/javascript">  
            mui.init();  
            mui.plusReady(function() {  
                var temp = "";  
                for(var i = 0; i < 5; i++) {  
                    temp += '<li id="test" class="mui-table-view-cell" style="list-style-type:none;">';  
                    temp += 'Item ' + (i + 1);  
                    temp += '</li>';  
                }  
                document.getElementById("middle-content").innerHTML = temp;  
            });  
        </script>  
    </body>  

</html>
2017-06-28 17:16 负责人:无 分享
已邀请:
5个萝卜

5个萝卜

真机运行下

  • Salazar (作者)

    谢谢,我研究研究

    2017-06-29 11:24

5个萝卜

5个萝卜

mui(document).on('tap','.mui-table-view-cell',function(){
//点击执行的具体代码
});

  • Salazar (作者)

    比如我这样点击是会打印内容 mui(document).on('tap','.mui-table-view-cell',function(){

    mui.toast("daf");

    });

    但是怎么拿所点击条目内的数据呀?

    2017-06-29 09:50

  • 5个萝卜

    我之前的做法是在标签上自定义属性放数据

    2017-06-29 10:01

  • 5个萝卜

    有帮助到的话,可以给个赞

    2017-06-29 10:03

5个萝卜

5个萝卜

<script type="text/javascript">
mui.init();
mui.plusReady(function() {
var temp = "";
for(var i = 0; i < 5; i++) {
temp += '<li id="test" class="mui-table-view-cell" style="list-style-type:none;" data-type="1234">';
temp += 'Item ' + (i + 1);
temp += '</li>';
}
document.getElementById("middle-content").innerHTML = temp;
});

      mui(document).on('tap','.mui-table-view-cell',function(){  
            //获取数据  
            this.getAttribute("data-type");  
      });  

    </script>
  • Salazar (作者)

    你这样的做法好像不能拿到当前点击条目的数据吧?我改了一下也没拿到,能否发你之前的做法,在标签上自定义属性放数据的示例借鉴一下,谢谢!

    2017-06-29 10:27

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