html神坑之button的type屬性

1,入坑記錄

不知道第幾次入坑這個button的type屬性了,今天我要記錄一下,告誡一下自己。經常你回發現正確的jquery語句,但是點擊事件卻沒有反應,如果你不調試,你可能發現不了問題,其實效果已經出來了,但是頁面刷新了,導致跟沒效果一樣。

2,代碼演示(錯誤)

<html>
<head>
<title>Insert title here</title>
<script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript">
	$(function(){
		$("#add").click(function(){
			$("#add").attr('disabled',true);
			$("#add").text('已發送');
			$("#br").before("驗證碼: <input type='text' name='checkcode'/>");
		});
	});
</script> 
</head>
<body>
	<form action="#" method="post">
		手機號: <input type="text" name="phone"><button id="add"> 發送驗證碼</button>
		<br>
		<br id="br">
	</form>
</body>
</html>

####3,代碼演示(正確)

<html>
<head>
<title>Insert title here</title>
<script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript">
	
	$(function(){
		$("#add").click(function(){
			$("#add").attr('disabled',true);
			$("#add").text('已發送');
			$("#br").before("驗證碼: <input type='text' name='checkcode'/>");
		});
	});
</script> 
</head>
<body>
	<form action="#" method="post">
		手機號: <input type="text" name="phone"><button type="button" id="add"> 發送驗證碼</button>
		<br>
		<br id="br">
	</form>
</body>
</html>

總結:button標籤的type屬性在IE瀏覽器默認是button,但在其他瀏覽器默認是submit,所以寫button的時候最好都指定其type屬性,不要省事,不然入坑很難找到原因的。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章