Chrome下JQuery的mouseup事件丢失

最近自己在做一个许愿墙的时候，有一个拖动小纸条的需求，需要用到jquery进行实现，但是在实现过程中发现jquery的mouseup事件一直不响应，然后就百度查了一下，发现有人遇到过类似问题，文章中建议使用bind方式进行事件监控，试了一下果然奏效。下面帖上本次代码：

正确代码：

<pre name="code" class="javascript"><span>	</span>var index=51;//点击小纸条时该小纸条置于最顶层
	$(document).ready(function(){
		var clicked = "Nope.";
        var clientX = "0";
        var clientY = "0";
        var difx = "0";
        var dify = "0"; 
        
        $(".wishpaper").mousedown(function(e){
			//鼠标按下，修改样式为拖动样式
			$(this).css("cursor","move");
			//点击小纸条时该小纸条置于最顶层
			$(this).css("z-index",index);
			index++;//方便下一个小纸条置于最顶层
			clicked = "Yeah.";
			//点击时，记录鼠标位置
			clientX=e.clientX;
			clientY=e.clientY; 
		}); 

		$(".wishpaper").bind("mouseup",function(){
			//鼠标抬起，改回鼠标样式
			$(this).css("cursor","default");
			clicked="Nope."; 
		}); 
	
		$(".wishpaper").mousemove(function(event){ 
			$("#test").html(clicked);
			difx = event.clientX-clientX;
			dify = event.clientY-clientY;  
			var newx = parseInt($(this).css("left").replace('px',''))+difx;
        	var newy = parseInt($(this).css("top").replace('px',''))+dify;  
        	if(clicked=="Yeah."){
            	//拖动时如果鼠标是按下，则改变小纸条位置 
        		$(this).css({ top: newy, left: newx });
        	}
        	//重置鼠标位置     
        	clientX=event.clientX;
        	clientY=event.clientY;
		});
<span>		</span>

<span>		</span>//防止鼠标拖动太快溢出纸片范围导致鼠标抬起事件不能执行
		$(document).bind("mouseup",function(){
			$(this).css("cursor","default");
			clicked="Nope."; 
		}); 
	});

之前错误代码：

<pre name="code" class="javascript"><pre name="code" class="javascript">$(".wishpaper").mouseup(function(){
<span style="white-space:pre">	</span>//鼠标抬起，改回鼠标样式
	$(this).css("cursor","default");
	clicked="Nope."; 
});