button元素的id與onclick的函式名字相同 導致方法失效的問題
摘要：
需求需要在原先頁面新增一個按鈕，觸發一個function，如此簡單的操作，卻無意間發現了一個問題。(還是對html瞭解的太少)
先看下在菜鳥教程的示例(錯誤程式碼)
<!DOCTYPE html>
<html>
<head>
<meta cha...
需求需要在原先頁面新增一個按鈕，觸發一個function，如此簡單的操作，卻無意間發現了一個問題。(還是對html瞭解的太少)
先看下在菜鳥教程的示例(錯誤程式碼)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
function dianji(){
$("input[name='city']:checked").each(function(){
alert($(this).val());
})
}
</script>
</head>
<body>
<form>
<input type='button' id='dianji' onclick='dianji()' value='獲取選中的城市'/><br />
<input type='checkbox' name='city' value='北京'/>北京 <br />
<input type='checkbox' name='city' value='上海'/>上海 <br />
<input type='checkbox' name='city' value='天津'/>天津 <br />
<input type='checkbox' name='city' value='重慶'/>重慶 <br />
</form>
</body>
</html>
這個時候點選會出現 Uncaught TypeError: dianji is not a function
為什麼會這樣呢？一看沒啥毛病啊，function是絕對定義的。
之後可以將框中的程式碼一出form，變成如下程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
function dianji(){
$("input[name='city']:checked").each(function(){
alert($(this).val());
})
}
</script>
</head>
<body>
<input type='button' id='dianji' onclick='dianji()' value='獲取選中的城市'/><br />
<form>
<input type='checkbox' name='city' value='北京'/>北京 <br />
<input type='checkbox' name='city' value='上海'/>上海 <br />
<input type='checkbox' name='city' value='天津'/>天津 <br />
<input type='checkbox' name='city' value='重慶'/>重慶 <br />
</form>
</body>
</html>
這個時候就正確了，可見是form的問題，原因
form中的input屬性的值已經作為當前form的屬性了，由於 作用域問題 ，onclick訪問的是form的dianji屬性而不是外部的函式。
【dianji()會預設傳遞一個隱性引數this，此時的this代表的是form表單物件，會優先呼叫表單的屬性，即dianji(this)，而不是呼叫window物件的dianji()方法】
解決方法：
- 修改id名不要與函式名相同
- onclick="dianji()"改為onclick="window.dianji()"表明是window物件的屬性
- 使用jquery的事件繫結
踩過的坑總結下，共勉