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

关于使用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部分

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