Javascript - 找不到功能？！從onClick調用，功能是在同一頁

Question

我有一個非常奇怪和混亂的錯誤。

這裏是我的代碼：

{if="$pjax === false"}{include="header"}{/if} 
<script type="text/javascript"> 
    $(document).ready(function() { 
     function clickclear(thisfield, defaulttext) { 
      if (thisfield.value == defaulttext) { 
       thisfield.value = ""; 
      } 
     } 
     function clickrecall(thisfield, defaulttext) { 
      if (thisfield.value == "") { 
       thisfield.value = defaulttext; 
      } 
     } 
    }); 
</script> 
<form action='./login' method='post' name='form'> 
<ul class="form"> 
    <li><input type="text" name="username" value="Username" id="username" onclick="clickclear(this, 'Username')" onblur="clickrecall(this,'Username')" /></li> 
    <li><input type="password" name="password" value="Password" id="password" onclick="clickclear(this, 'Password')" onblur="clickrecall(this,'Password')" /></li> 
    <li><span style='display:block;height:27px;float:left;line-height:27px;'>Remember Me</span> <div id='itoggle' style='float:right;'><input type="checkbox" id="remember" class='itoggle' /></div><div class='clearfix'></div></li> 
</ul> 
</form> 
<a href="javascript: form.submit()" class="button white">Login</a> 
{if="$pjax === false"}{include="footer"}{/if} 

你可以看到有兩個功能，clickclear和clickrecall。這些從onClick和onBlur的表格輸入中被調用。然而，當我運行它們，我得到這些javascript錯誤：

Uncaught ReferenceError: clickclear is not defined

Uncaught ReferenceError: clickrecall is not defined

任何想法？我知道這可能很簡單，但我看不到它。

Answer 1

這是因爲你的函數在.ready()回調中。這些在全球範圍內是不可見的（這很好）。

所以最好使用像.on() jQuery的事件連接方法：

$(document).ready(function(){ 

    //your code 
    function clickclear(){...} 
    function clickrecall(){...} 

    //the handlers 
    $('#username').on('click',function(){ //bind click handler 
     clickclear(this,'Username');  //things to do on click 
    }).on('blur',function(){    //chain blur handler 
     clickrecall(this,'Username');  //things to do on blur 
    }); 

    $('#password').on('click',function(){ //bind click handler 
     clickclear(this,'Password');  //things to do on click 
    }).on('blur',function(){    //chain blur handler 
     clickrecall(this,'Password');  //things to do on blur 
    }); 

    ...other handlers... 

}); 

而且一個側面說明，有一個placeholder屬性爲Chrome，它的作用就像佔位符文本：

<input type="text" placeholder="username" /> 
<input type="password" placeholder="password" />