行內onclick使用遇坑--------做用域與傳入字符串

 問題一：行內onclick觸發的函數放在$(funtion(){})內報錯，錯誤代碼以下：

1     <input type="button" value="肯定" onclick="say()">
2     <script>
3         $(function(){
4             function say(){
5                 alert(123);
6             }
7         })
8     </script>

運行以後報錯：say is not defined

$(function{})的做用相似於window.onload,都是網頁加載完成在執行相應的代碼。刪去$(function(){})以後程序運行正常，看來$(function(){})自己也是一個函數（這麼明顯以前竟然沒注意到），它造成了一個函數做用域，將say()這個函數變成了一個局部變量，$(function(){})外面沒法訪問。

解決方法：

1.刪去$(function(){})，若是將<script>寫在最下面，$(function(){})通常能夠不用寫。

2.若是必學寫$(function(){})，將function say(){}改寫爲window.say = function(){},將say()函數變爲全局的。

問題2：行內onclick傳入動態字符串，錯誤代碼以下：

1     <script>
2         var str = "asd";
3         $("<input type='button' value='肯定' onclick='say("+str+")'>").appendTo($('body'));
4         function say(str){
5             console.log(str);
6         }
7     </script>

想讓點擊按鈕時，輸出的內容隨str變化，可是報錯asd is not defined

看起來 asd 被當成了變量，因而代碼稍做修改：$("<input type='button' value='肯定' onclick='say(\'"+str+"\')'>").appendTo($('body')); 給str加了一個單引號，運行以後又報錯：Unexpected token }

查看瀏覽器控制檯發現，這段代碼被解析成了這樣：<input type="button" value="肯定" onclick="say(" asd')'="">; 詢問了大神以後，將str加的單引號改成雙引號，程序果真正常運行。通過思考得出結論，在保證js代碼單雙引號配對的同時，也要保證解析到html中的正確性，即標籤中也是區分單雙引號的。雖然標籤中寫成這樣<input onclick="say('asd')">(正確寫法); 可是被解析到瀏覽器中查看，都變成了雙引號<input onclick="say("asd")">;一度影響了個人判斷。。。

解決方法：

1.str外圍改成雙引號即$("<input type='button' value='肯定' onclick='say(\'"+str+"\')'>").appendTo($('body')); 

2.去掉say()函數的單引號，改成$("<input type='button' value='肯定' onclick=say(\'"+str+"\')>").appendTo($('body')); 這樣寫瀏覽器會幫你加一個雙引號，並且say()括號中的單雙引號被正確解析。