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

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

    <input type="button" value="確定" onclick="say()">
    <script>
        $(function(){
            function say(){
                alert(123);
            }
        })
    </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傳入動態字符串，錯誤代碼如下：

    <script>
        var str = "asd";
        $("<input type='button' value='確定' onclick='say("+str+")'>").appendTo($('body'));
        function say(str){
            console.log(str);
        }
    </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()括號中的單雙引號被正確解析。