Question

这是我的HTML页面：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>

<script type="text/javascript" src="myscript.js"></script>

<script type="text/javascript">

$(document).ready(function() {
function closecontactform(){
alert("closing the form");
};
});
</script>
</head>
<body>
<p id="elementname">Click me to call function</p>
</body>

这是在myscripts.js文件中：

$(document).ready(function() {
$('#elementname').click(function() {
alert("click detected");
closecontactform();
}); 
});

我的实际页面比这复杂得多，并且包含了很多jquery，但这是仅显示必要代码的基本问题。我希望能够从单独的.js文件中调用函数，而该函数在主页面中定义。在这个基本的简单版本中，我尝试删除$（document）.ready（function（）...并且在这个简单的示例中有帮助但是我在更复杂的页面中需要该行，因为删除它似乎打破了我要去的其他一切在。

你会看到“点击检测到”被调用，但“关闭表单”却没有。

你能给我任何指示吗？

谢谢，

Answer 1

您有范围问题。您不需要在$(document).ready()中包装命名函数。

如果包含在ready范围内，由于函数内的闭包，它的范围仅在该ready函数中可用。

示例：

$(document).ready(function() {
    function doAlert() {
        alert('foo');
    } 
    /* can call function since scope in same parent function*/
    doAlert();
}); 
/* function not in scope, is undefined here*/
doAlert();

重构所以函数是全局可用的，并且如果从任何地方调用它将起作用。将在以下两种情况下都有效：

function doAlert() {
    alert('foo');
}

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

进一步说明：

许多人担心使用jQuery选择器和方法的函数必须包含在$(document).ready()中。 ready之外的命名函数可以包含所有jQuery代码......但是......在DOM准备好确保html存在之后需要调用它们

Answer 2

你有没有尝试过移动

<script type="text/javascript" src="myscript.js"></script>

低于<body> - 标记？

Answer 3

首先，您需要将脚本标记移动到</body>标记的正上方。

其次，如果您只是删除文档就应该在上面工作。问题是你在一个闭包内定义了你的函数意义，它超出了范围。您的函数不必处于文档准备状态，因为它只会在触发其他文档时触发（意味着文档已准备就绪）。

从单独的.js文件中调用主页面中的jquery函数。

3 个答案: