关于使用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在项目应用中所遇到的问题及时记录下来,这样大家都能在遇到类似问题的时候,有依据的解决问题,而不是无头苍蝇一样乱撞。