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');
}
});