这是我的 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()... 在这个简单的示例中，它有所帮助，但是我在更复杂的页面中需要该行，因为删除它似乎会破坏我所要做的一切上。
您将看到“检测到点击”被调用，但“关闭表单”没有被调用。
您能给我一些建议吗？
谢谢
最佳答案
您遇到范围问题。您不需要将命名函数包装在 $(document).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 存在
关于jquery - 从单独的 .js 文件调用主页中的 jquery 函数。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14007578/