zepto.js 模版中的事件的实现

zepto.js 模版中的事件的实现

HTML：

<div id="vote"></div>

   <script id="voteTem" type="text/html">
    {{ each $data as item index }}
        <div class="vote">
                <figure>
                    <img class="pic-food" src="{{ item.img }}">
                </figure>
                <div class="name-food">{{ index + 1 }}、{{ item.name }}</div>
                <div class="des-food">{{ item.des }}</div>
                <input class="hide" type="" value="{{ item.id }}">
                <div class="btn-base btn-unchecked">选择</div>
            </div>
    {{ /each }}
    </script>

JS：

// 初始化列表
    common.ajax('/webapp/public/json/vote.json', {}, function(data) {
        if(data.flag) {
            data = data.result.rows;
            var html = template('voteTem', data);
            $('#vote').html(html);
        }
    }, function(data) {
        // error回调
    });

// 模版中点击事件的实现

$('#vote').on('click', ".btn-base", function(e) {
        if($(this).text() === "选择") {    // $(this)为当前对象
            if(flag) {
                alert("您只能选择一个");
            }
            else {
                flag = true;
                dataSelected.id = $(this).prev().val();      // $(this).prev()为当前对象的上一个对象
                // dataSelected.id = $(this).id;
                $(this).text('已选择');
                $(this).addClass('btn-checked').removeClass('btn-unchecked');
            }
        }
        else {
            flag = false;
            $(this).text('选择');
            $(this).addClass('btn-unchecked').removeClass('btn-checked');
        }
    });