js學習筆記(新手向)

時間 2019-11-19

原文原文鏈接

在使用的時候發現一個問題,,,css

在從新渲染一個模板後,,用 jquery 給元素綁定的事件處理器不會觸發了,,通過調試後發現,,jquery綁定事件的原理多是給文檔元素對象添加屬性,,而渲染的時候會刪除這個對象,,以模板文件來新建元素,,因此事件處理器並不會從新綁定html

在以後想到的解決辦法有點搞笑,,每一個頁面只渲染一次,,每次須要渲染的時候就向服務器請求更改數據,,而後刷新本頁面,,就避免了綁定了事件處理器的對象被刪除,,jquery

//刷新本頁面
var url = window.location.href;

window.location.href = url;        //這個刷新方法雖然笨,,可是有效

後面又想到一個解決辦法,,,在模塊內建立元素的時候設置事件處理器,,,,就至關於每次渲染就設置事件處理器,,,,也避免了這個問題服務器

//手動設置事件處理器,,雖然麻煩,,但相比上面一個要簡單太多
<button class = "btn btn-default next" onclick = "next()">Next</button>

寫到這裏忽然想到,,,,既然jquery的註冊事件處理器,,是隻註冊一次,,,那若是給一個className註冊了一個處理器,,,再更改className會不會依然可以觸發,,,,函數

/*這是第二次修改的,,,,,在另外的地方遇到一樣的問題,,,,此次用的onclick綁定事件處理,,,,,可是問題出現了不能使用onload或者其餘的帶有本身的做用域的方法,,,,,,,this

問了老大,,,很簡單但我沒想到,,,,,把全部的會變得無效的事件綁定代碼放到一個函數裏面,,,,,每次渲染的時候就從新綁定一次,,,,*/url

去嘗試了一下:調試

代碼以下:code

<!DOCTYPE html>
<html>
<head>
	<meta charset = "utf-8"/>
	<script src = "jquery.min.js"></script>
	<script>
		$(window).load(function() {
			$('.next').click(function() {
				console.log($(this)[0].className);
				$(this)[0].className = "last";
			});
		});
	</script>
</head>

<body>
	<button class = "next">next</button>
</body>
</html>

輸出的結果:htm