使用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"))  //這樣就可以取到值了
			});