1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 关于使用jquery weui的picker部分遇到的问题及解决办法

关于使用jquery weui的picker部分遇到的问题及解决办法

时间:2022-03-09 10:21:30

相关推荐

关于使用jquery weui的picker部分遇到的问题及解决办法

关于使用jquery weui的picker部分遇到的问题及解决办法

本人在使用jquery weui制作app项目时,遇到[picker][6]部分,按钮点击触发事件时发生的问题,在这里把它记录下来,希望大家在遇到类似情况时能有一个好的解题思路:

[发生问题的情况][6]

jquery weui引入

<link rel="stylesheet" type="text/css" href="/dist/css/jquery-weui.css"/><link rel="stylesheet" type="text/css" href="/dist/lib/weui.min.css"/><script src="/dist/lib/jquery-2.1.4.js"></script><script src="/dist/js/jquery-weui.js"></script>

html部分

<input type="button" class="btn select" onclick="select('clickOnce')" value="触发事件" />

css部分

.btn {padding:8px 24px;background-color:#f8f8f8;font-size:16px;color:#000}

js部分

var name;function saveData(name){name = "本次点击所获取的name"+name;console.log(name);}function select(id){console.log(id);s = id;$('.select').select({title: "标题",closeText: "完成",items: [{title: "iPhone 3GS",value: "001",},{title: "iPhone 4GS",value: "002",},{title: "iPhone 5GS",value: "003",}],onOpen: function(d){console.log(this, d);},onChange: function(d){console.log(this, d);saveData(id);},onClose: function(d){console.log(this, d);}})}

问题产生

当点击按钮时,需要同时触发两次事件,一次事件是行间的[onclick][6]事件,一次事件是[jquery weui][6]的[select][6]事件。但事实上,第一次点击这个按钮的时候只触发了[onclick][6]行间事件,而没有触发[jquery weui][6]的[select][6]事件;当第二次点击这个按钮的时候才会触发[jquery weui][6]的[select][6]事件;

问题分析

第一种情况
类似冒泡事件(可能)
第二种情况
事件触发过程中未读取到select函数中内藏的[jquery weui][6]的[select][6]事件(很有可能)
第三种情况
js部分冲突(应该没可能)

问题解决

第一种情况
类似冒泡事件(暂未想好验证办法)
第二种情况
事件触发过程中未读取到select函数中内藏的[jquery weui][6]的[select][6]事件(经验证,是这种情况引起的)
第三种情况
js部分冲突(不是这种情况)

解题过程

var name;var s;function saveData(name){name = "本次点击所获取的name"+name;console.log(name);}function select(id){console.log(id);s = id;}$('.select').select({title: "标题",closeText: "完成",items: [{title: "iPhone 3GS",value: "001",},{title: "iPhone 4GS",value: "002",},{title: "iPhone 5GS",value: "003",}],onOpen: function(d){console.log(this, d);},onChange: function(d){console.log(this, d);saveData(s);},onClose: function(d){console.log(this, d);}})

经验总结

虽然这个问题看着很简单,但是在日常项目中还是有可能碰到的。当我遇到这个问题的时候查询相关资料时发现jquery weui的相关实践及问题处理方案还是很少的。在此,我想说的是,希望大家都能积极的把jquery weui在项目应用中所遇到的问题及时记录下来,这样大家都能在遇到类似问题的时候,有依据的解决问题,而不是无头苍蝇一样乱撞。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。