使用jQuery.data() 注意事项

我很喜欢使用jquery去解决前端的问题。今天在使用data()函数时候发现有点坑，试了好久没出来，现在总结下。
通常我们会使用ajax请求后端，并且返回json对象，然后拿这个对象遍历出值并放到元素中显示出来。当我们需要在这个在这个元素设置一个标识时。我们可以自定一个属性，并用attr() 方法去获取值。如

<span class="s" userid="1" >张三</span>
这样，我们就可以使用$(".s").attr("userid") 获取到值

但是，这样感觉有点麻烦，于是用了data() 方法来实现

//my.post 是自己简单封装的$.ajax() 方法 无需理会，直接看关键代码部分
my.post({
	url:"video/queryVideoList"
	,data:data
	,done:function(result){
		$(".videoList").html("");
		if(result.length == 0){
			$(".videoList").html('<div style="margin: 50% 0;text-align: center;">没有可观看的视频<br>快去个人中心上传吧</div>');
			return;
		}
		$.each(result,function(i,v){
			
			var videoEle = [
			'<div class="video-div" style="display: flex;justify-content: center;flex-wrap: wrap;margin:20px 0px;">'+
			'<div style="width: 90%;">                                                           '+
			'	<div style="width: 100%;">                                                       '+
			'		<img src="'+v.coverFile+'" style="width: 100%;"/>                       '+
			'	</div>                                                                           '+
			'	<div style="width: 100%;text-align: center;padding-top: 5px;">                   '+
			'		'+v.title+'                            									 '    +
			'	</div>                                                                           '+
			'</div>                                                                              '+
			'</div>                                                                              '].join('');
			//以下关键代码
			var $el = $(videoEle);
			$el.data("video",v);
			$(".videoList").append($el); //把它加到页面上显示，注意，直接使用$el变量就行了。我一开始自作聪明用了$el.prop("outerHTML")，结果弄了半天。
			console.log($el.data("video"));  //可以打印出v对象信息
		});  
	}
});

//绑定点击事件
$(document).on("click",".video-div",function(){
				console.log($(this).data("video"))  //这样就可以取到值了
			});