笔凌
笔凌
  • 发布:2017-04-07 16:24
  • 更新:2017-04-14 11:21
  • 阅读:3084

动态加载出来的数据栏点击事件失效

分类:MUI

问题如图片上描述的,

用上拉加载出来的新数据栏里面的小按钮点击无反应。

小按钮都用 mui("").on("tap","",function(){......})方式批量绑定的事件

附上源代码,如下:

<!DOCTYPE html>  
<html>  
	<head>  
		<meta charset="utf-8">  
		<title>我的</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">  
		<link rel="stylesheet" type="text/css" href="css/my.css"/>  
		<link rel="stylesheet" type="text/css" href="css/icons-extra.css"/>  
	</head>  
	<body>  
		<div class="mui-content">  
			<div class="cc-touxiang">  
				<div class="touxiang" id="touxiang"></div>  
				<div class="uname" id="nicheng">点击设置</div>  
			</div>  
			<!--下拉刷新容器-->  
			<div id="pullrefresh" class="mui-content">  
				<div class="mui-scroll">  
					<!--数据列表-->  
					<dl>  
						<dd class="cc-dd-list">  
							<div class="mid">  
								<div class="left">  
									<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490966276726&di=4b5204549d70268bb5749edc57955494&imgtype=0&src=http%3A%2F%2Fscimg.jb51.net%2Fallimg%2F151130%2F14-151130161522136.jpg" alt="" />  
								</div>  
								<div class="right">  
									<div class="title">天然纯蜂蜜特价倾销</div>  
									<div class="price">¥220<span class="status mui-badge mui-badge-success">已签收</span></div>  
									<div class="info">共1件商品合计:¥220(含运费¥10)</div>  
								</div>  
							</div>  
							<div class="bot">  
								<button data-role="帮忙1" type="button" class="mui-btn mui-btn-primary mui-btn-outlined mui-icon-extra mui-icon-extra-heart-filled bangmang">帮个小忙</button>  
							</div>  
						</dd>  
						<dd class="cc-dd-list">  
							<div class="mid">  
								<div class="left">  
									<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490966276726&di=4b5204549d70268bb5749edc57955494&imgtype=0&src=http%3A%2F%2Fscimg.jb51.net%2Fallimg%2F151130%2F14-151130161522136.jpg" alt="" />  
								</div>  
								<div class="right">  
									<div class="title">天然纯蜂蜜特价倾销</div>  
									<div class="price">¥220<span class="status mui-badge mui-badge-success">已签收</span></div>  
									<div class="info">共1件商品合计:¥220(含运费¥10)</div>  
								</div>  
							</div>  
							<div class="bot">  
								<button data-role="帮忙3" type="button" class="mui-btn mui-btn-primary mui-btn-outlined mui-icon-extra mui-icon-extra-heart-filled bangmang">帮个小忙</button>  
								<button data-role="查物流" type="button" class="mui-pull-right mui-btn mui-btn-outlined mui-icon-extra mui-icon-extra-express chawuliu">查物流</button>  
								<button data-role="评价" type="button" class="mui-pull-right mui-btn mui-btn-green mui-btn-outlined mui-icon-extra mui-icon-extra-like pingjia">评价</button>  
							</div>  
						</dd>  
					</dl>  
				</div>  
			</div>   
		</div>  
	</body>  
	<script src="js/mui.min.js"></script>  
	<script src="js/my.js"></script>  
	<script>  
		mui.init({  
			statusBarBackground:'#fe5957',  
			pullRefresh: {  
				container: '#pullrefresh',  
				up: {  
					contentrefresh: '给我加...',  
					contentnomore:'暂时没有啦',  
					callback: pullupRefresh  
				}  
			},  
			swipeBack:true //启用右滑关闭功能  
		});  
		//mui.ready(function(){  
			document.getElementById("touxiang").addEventListener("tap",function(){  
				mui.openWindow({  
					url:"setting.html",  
					id:"setting"  
				});  
			});  
			document.getElementById("nicheng").addEventListener("tap",function(){  
				mui.openWindow({  
					url:"setting.html",  
					id:"setting"  
				});  
			});  
			mui(".cc-dd-list").on("tap",".bangmang",function(){  
				mui.openWindow({  
					url:"help.html",  
					id:"help"  
				});  
			});  
			mui(".cc-dd-list").on("tap",".pingjia",function(){  
				mui.openWindow({  
					url:"pingjia.html",  
					id:"pingjia"  
				});  
			});  
			mui(".cc-dd-list").on("tap",".chawuliu",function(){  
				mui.openWindow({  
					url:"wuliu.html",  
					id:"wuliu"  
				});  
			});  
		//});  
		/**  
		 * 上拉加载具体业务实现  
		 */  
		var count=0;  
		function pullupRefresh() {  
			setTimeout(function() {  
				getData();  
				mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2));  
			}, 1500);  
		}  
		function getData(){  
			var content="";  
			content+='<dd class="cc-dd-list">';  
			content+='<div class="mid">';  
			content+='<div class="left">';  
			content+='<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490966276726&di=4b5204549d70268bb5749edc57955494&imgtype=0&src=http%3A%2F%2Fscimg.jb51.net%2Fallimg%2F151130%2F14-151130161522136.jpg" alt="" />';  
			content+='</div>';  
			content+='<div class="right">';  
			content+='<div class="title">天然纯蜂蜜特价倾销</div>';  
			content+='<div class="price">¥220<span class="status mui-badge mui-badge-success">已签收</span></div>';  
			content+='<div class="info">共1件商品合计:¥220(含运费¥10)</div>';  
			content+='</div>';  
			content+='</div>';  
			content+='<div class="bot">';  
			content+='<button data-role="帮忙3" type="button" class="mui-btn mui-btn-primary mui-btn-outlined mui-icon-extra mui-icon-extra-heart-filled bangmang">帮个小忙</button>';  
			content+='<button data-role="查物流" type="button" class="mui-pull-right mui-btn mui-btn-outlined mui-icon-extra mui-icon-extra-express chawuliu">查物流</button>';  
			content+='<button data-role="评价" type="button" class="mui-pull-right mui-btn mui-btn-green mui-btn-outlined mui-icon-extra mui-icon-extra-like pingjia">评价</button>';  
			content+='</div>';  
			content+='</dd>';  
			var dl=document.body.querySelector("dl");  
			var dd=document.createElement("dd");  
			dd.className='cc-dd-list';  
			dd.innerHTML=content;  
			dl.appendChild(dd);  
		}  
	</script>  
</html>
2017-04-07 16:24 负责人:无 分享
已邀请:
唐糖

唐糖 - 这个家伙很懒,什么也没有留下

不要用cc-dd-list进行代理,应该用他的父节点代理

笔凌

笔凌 (作者)

好的,谢谢,我试试

笔凌

笔凌 (作者)

果然解决了,感谢感谢感谢!!!

sany_123

sany_123

怎么解决的啊????????

  • 洛上千栀

    嫌麻烦就mui(documet).on('tap','.class',function(){});


    2017-04-14 12:00

t***@qq.com

t***@qq.com

很简单 , 监听的标签的 父级以上 必须存在,比如mui('body').on()就可以监听到了

  • wersionlovewz

    确实,动态绑定的元素,其祖先元素必须要存在才行。


    2017-06-24 17:11

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