JS別の外部ファイルから外部のJS関数を呼び出すと、「未定義」エラーを与える

Question

私はplugins.jsにこのコードを持っている：

$(document).ready(function() {       

watermark = function(elemId, text, hoverClass, normalClass, parentId){ 
    // onFocus event 
    $("#"+elemId).focus(function(){ 
     ($(this).val()==text) 
      $(this).val(''); 
     (parentId!=0) 
      byId(parentId).className = hoverClass; 
    }); 
    // onBlur event 
    $("#"+elemId).blur(function(){ 
     ($(this).val()=='') 
      $(this).val(text); 
     (parentId!=0) 
      byId(parentId).className = normalClass; 
    }); 
} 
}); 

その後、私はindex.jsファイルでこれを持っている：

new watermark("footer_contact_name", "Name", "footer_form_text_active", "footer_form_text", "footer_form_field_1"); 

すべてが同じjsファイルに書き込まれたときに動作しますが、index.jsファイルからこのように呼び出すと、Firebugで未定義の関数エラーが発生し、Firebugを使用してデバッグします。

アイデア？ところで

おかげ

：私はこのようなindex.htmlの中でこれらを含める：DOMは$(document).ready(function()の内側（操作する準備ができている、そのことがないとき

<script src="scripts/plugins.js" type="text/javascript"></script> 
<script src="scripts/index.js" type="text/javascript"></script> 

Answer 1

あなたは、ドキュメントの準備ができて取得した後、関数を呼び出す必要がある - でそれをラップ：

$(document).ready(function() { }); 

Answer 2

watermark機能を宣言しますあなたのindex.jsが含まれます瞬間利用可能

EDIT：

の種類がの場合は、DOMの要素を使用するためDOMを操作する準備ができたらwatermarkを呼び出します。ソリューションは、$(document).ready(function()外にあなたのwatermark関数を宣言した後、$(function() {（$(document).ready()の省略形）内index.jsからそれを呼び出すために、次のようになります。

functions.js：

watermark = function(elemId, text, hoverClass, normalClass, parentId){ 
    // function logic 
} 

index.js：

$(function() { 
    new watermark("footer_contact_name", "Name", "footer_form_text_active", "footer_form_text", "footer_form_field_1"); 
} 

Answer 3

watermark()ファンクションは、のDOMがロードされた後に定義されています。 $(document).ready()コールの外で定義することができ、その中に$(document).ready()コールを埋め込むことができるため、DOMがロードされたときに実行されますが、その前に使用できるようになります。

例えば：

watermark = function(elemId, text, hoverClass, normalClass, parentId) { 
    $(document).ready(function() { 
     /* ... */ 
    } 
}