从另一个外部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文件中调用它时，我在FireFox中得到一个未定义的函数错误，使用Firebug进行调试。

有什么想法吗？

由于

BTW：我在index.html中包含这些：

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

Answer 1

当DOM准备好被操作时，watermark函数被声明（在$(document).ready(function()内部，因此，当index.js被包含在内时，它将不可用。

修改

在DOM准备好被操作之后，你有必须调用watermark，因为它使用了DOM中的元素。解决方案是在watermark之外声明您的$(document).ready(function()函数，然后在index.js（$(function() {的简写）中从$(document).ready()调用它：

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 2

您只在加载DOM后定义watermark()函数。您可以在$(document).ready()调用之外定义它，并且可以在其中嵌入$(document).ready()调用，因此它将在加载DOM时执行，但在此之前可用。

例如：

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

Answer 3

您需要在文档准备好后调用该函数 - 将其包装在：

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