YH开发笔记 MUI使用一

YH开发笔记

---

MUI使用 一

撰写于2016-12-9

动态创建内容，对内容监听无效问题

• 使用A方法对页面进行动态创建内容B后，要使用C方法对B进行监听事件。这时候必须要注意：C方法必须要放在A方法里，否则会C方法会无响应。其实这和java里面差不多，你的页面还没有创建B，就已经使用C，C是获取不到内容的，所就没有响应。

示例代码

		function getAnswerById(qid) {
			console.log("url=" + BASESTRING + GETALLANSWERINFOBYID + '?qid=' + qid);
			mui.ajax(BASESTRING + GETALLANSWERINFOBYID, {
				data: {
					qid: qid
				},
				dataType: 'json',
				type: 'get',
				timeout: 10000,
				async: false,
				success: function(data) {
					console.log(data);
					if(data.length > 0) {
						//表明有数据
						var content; //问题答案内容
						var fanNum; //反对数目
						var zanNum; //赞同数目
						var time; //发表时间
						var aid; //答案id
						var userid; // 用户id
						var card = document.body.querySelector('.mui-table-view');
						for(var i = 0; i < data.length; i++) {
							content = data[i].content;
							fanNum = data[i].fan;
							zanNum = data[i].zan;
							console.log("zanNum="+zanNum);
							if(zanNum == null){
								zanNum = 0;
								console.log("执行zanNum=0")
							}
							if (fanNum == null) {
								fanNum = 0
							}
							time = data[i].time;
							aid = data[i].id;
							userid = data[i].userid;
							var li = document.createElement("li");
							li.id = aid;
							li.className = 'mui-table-view-cell';
							li.innerHTML = '<div id="1" class="mui-card">\
											<div class="mui-card-header mui-card-media">\
												<img src="../images/apptestsoilformula/farmer.png" />\
												<div class="mui-media-body">\
													' + data[i].userid + '\
													<p>' + data[i].time + '</p>\
												</div>\
											</div>\
											<div class="mui-card-content">\
												<a>\
													<p class="mui-ellipsis-2">' + data[i].content + '</p>\
													<span class="open" title="0">[点击展开]</span>\
												</a>\
											</div>\
											<div id="'+aid+'" class="mui-card-footer">\
												<div  id="'+aid+'" title="0" class="unlike">\
													<img src="../images/apptestsoilformula/unlike_0.png" />\
													<span class="mui-number">' + fanNum + '</span>\
												</div>\
												<div id="'+aid+'" title="0" class="like">\
													<img src="../images/apptestsoilformula/like_0.png" />\
													<span class="mui-number">' + zanNum + '</span>\
												</div>\
											</div>\
										</div>';
							card.appendChild(li);
						}
						
						$("#loadingami").hide();
						$("#noneResult").hide();
						$("#errornet").hide();
						$("#container").show();
						
						//前方高能 请注意，前方高能请注意，前方高能请注意！在使用动态添加页面时候，对动态添加的事件A进行监听事件B时，必须要把B写在A里面，否则，B事件是无法进行响应的！;

						/*
						 * 内容页  点击展开
						 */
						mui(".mui-table-view-cell .mui-card-content").on('tap', 'span', function() {
							console.log('内容页 点击展开   点击监听');
							var span_title = this.getAttribute('title');
							if(span_title == 0) {
								//设置p标签的class
								$(this).parent().children('p').removeClass('mui-ellipsis-2');
								//												($(this).parent().children('span'))[0].innerHTML = '[点击收起]';
								$(this).hide();
								this.setAttribute('title', 1);
							}
									
						})
						})

					} else {
						//无数据
						console.log(NODATA);
						mui.toast(NODATA);
						
						$("#loadingami").hide();
						$("#noneResult").show();
						$("#errornet").hide();
						$("#container").hide();
					}
				},
				error: function(xhr, type, errorThrown) {
					//网络请求错误
					console.log(NOINTERNET);
					mui.toast(NOINTERNET);
					
					$("#loadingami").hide();
					$("#noneResult").hide();
					$("#errornet").show();
					$("#container").hide();
				}
			})
		}

• 这是一个简单的从服务器获取数据，然后根据数据使用for循环进行页面数据添加的一个方法，可以看见这里面有一个对内容页一个标签span进行的单击监听的事件。你可发现，当你把这个点击事件放在方法getAnswerById()外面时候，点击span标签是没有效果的。只有把这个点击事件放里面才会有效果。