mui使用pullrefresh后，里面的点击事件失效
2020-01-21 本文已影响0人
小小_128
我们的项目是mui做的，除了使用mui的js和css外还引入了jquery与渲染数据的template-web.js
失效的代码是这样的
html
<ul id="dynamic" class="dynamic">
<script type="text/template" id="dynamic-temp">
{{if list.length == 0}}
<li class="noLi">
<img src="./imgs/nodata.png" alt="">
</li>
{{else}}
{{ each list item index }}
<li>
<div class="trend">
<p style="overflow-wrap:break-word;">{{item.content}}</p>
{{if item.FriendsImg.length != 0}}
{{each item.FriendsImg it i }}
<img class="trend_img" src="{{it.imgUrl | switchImg}}" alt="" data-preview-src="" data-preview-group="1">
{{/each}}
{{/if}}
<p onclick="jumpComment({{item.friendId}})">
<img src="../wechatCircle/imgs/msg.png" alt="">
{{item.commentNumber}}条评论
</p>
</div>
</li>
{{ /each }}
{{/if}}
</script>
</ul>
js
// 跳转---评论
function jumpComment(friendId) {
window.location.href = urlGuard("../wechatCircle/comment.html", {
friendId: friendId,
userId: userId
})
}
当原生点击事件不触发后我又在各种尝试，先从css样式方面找问题。比如设置z-index属性。在p标签里面加内联样式style="z-index:999;"
emmm还是不管用，好吧，我去js部分找找毛病
js部分我只能去搞点击事件。当原生onclick事件根本就不触发后，我给换成了mui的tap事件
html
<p id="comment" friendId="{{item.friendId}}" style="z-index:999;">
<img src="./imgs/msg.png" alt="">
{{item.commentNumber}}条评论
</p>
js
// 跳转---评论
mui(".trend").on('tap',"#comment",function() { //.trend是#comment的父元素
console.log('comment----tap');
// window.location.href = urlGuard("./comment.html", {
// friendId: friendId,
// userId: userId
// })
})
当我以为最起码可以触发点击事件时，现实给我在寒冬腊月从头上浇了一桶冷水.....没关系，go on！
程序员就是应该具有越挫越勇的类似于打不死的小强的那种精神
后来看mui的相关资料的时候发现mui("ele").on(event,selector,handler)里面的ele必须是dom结构在刚开始加载时就存在的元素，我先用的mui(".trend")发现还是不触发直接就放在了mui("body")里面
// 跳转---评论
mui("body").on('tap',"#comment",function() {
var friendId = this.getAttribute('friendId');
window.location.href = urlGuard("./comment.html", {
friendId: friendId,
userId: userId
})
})
