zepto.js 下单次swipeUp 事件，貌似连续触发了多次

远人老师您好,

我昨天晚上看完了您的代码，想把代码改造成滑动组件，但是却遇到了一个问题。请看以下代码：

<!DOCTYPE html>
<html>
 <head>
    <title>modification_05.2_demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="zepto.min.js"></script>
	<script type="touch.js"></script><!--delet-->
	<link href="animate.css" rel="stylesheet" type="text/css">
	<style>
	   	blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul,img{
			margin: 0;
			padding: 0;
		}
	   	body{
	   		background:#c8161e;
	   		overflow:hidden
	   	}
	   	ul{
	   		list-style:none
	   	}
	   .clearfix:after{
	   		display: block; content: "\20"; height: 0; clear: both; overflow: hidden; visibility: hidden;
	   		}/*ie8ÒÔÉÏ*/
	   .img-container li img{}
	   img{
	   		width: 100%
	   	}
	   .img-container li {
	   		overflow:hidden;
	   	}
	</style>
</head>
<body>
	<ul class="img-container clearfix" id="container"></ul>

	<script>
	var total = 20;
	var i = 1;
	var num = 1;

	var tmpl ='<li data-id="'+i+'" class="animated bounceIn"><img src="img/'+i+'.jpg"></li>';
	$('#container').html(tmpl);	
	
	$('#container').delegate('li','swipeUp',function(){
		$('#container').swipeUp(function(){
			if(num>total){
				num = total;
			}else{
				num++;
			}
			console.log('num: '+num);
			var tmpl_2 = '<li data-id="'+num+'" class="animated bounceIn"><img src="img/'+num+'.jpg"></li>';
			$('#container').html(tmpl_2);
		})	
	});
	</script>
</body>
</html>

直接把该代码放进源代码的根目录即可运行。

现在的问题是，当我向上滑动一次图片，num应该是直接 +1，但每次滑动的实际变化却是 +0、+1、+2、+3、+4...

我在console下查看num是正常的+1，不过后一次会比前一次多触发一次事件；

所以我想麻烦老师您debug一下。