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

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

---

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

jquery weui引入

<link rel="stylesheet" type="text/css" href="http://jqweui.com/dist/css/jquery-weui.css"/><link rel="stylesheet" type="text/css" href="http://jqweui.com/dist/lib/weui.min.css"/><script src="http://jqweui.com/dist/lib/jquery-2.1.4.js"></script><script src="http://jqweui.com/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在项目应用中所遇到的问题及时记录下来，这样大家都能在遇到类似问题的时候，有依据的解决问题，而不是无头苍蝇一样乱撞。