我拥有的内部和外部 JS 文件
$(document).ready(function() {
var example = function(){ alert("hello") }
});
我想从我的 html 中调用该函数,我该怎么做?
<img src="..." ondblclick="example()" />
nb 我知道jquery dblclick()但对如何正确执行上述操作感到好奇。
我拥有的内部和外部 JS 文件
$(document).ready(function() {
var example = function(){ alert("hello") }
});
我想从我的 html 中调用该函数,我该怎么做?
<img src="..." ondblclick="example()" />
nb 我知道jquery dblclick()但对如何正确执行上述操作感到好奇。
$(document).ready(function() {
window.example = function() {
alert("hello")
}
});
如果可能的话,或者在外面定义它。看起来它根本不需要在文档中定义。
最好的选择是简单地在外部定义函数document.ready()
。没有$(document).ready()
必要在事件中定义函数,就好像你在函数中调用$(document).ready()
函数一样,保证文档准备就绪。
但是,您也可以在全局窗口对象上定义函数,如下所示:
$(document).ready(function() {
window.example = function(){ alert("hello") }
});
此处的其他解决方案将起作用,但在您的项目结构上,最好的解决方案是从 HTML 中删除事件处理代码并完全通过 javascript 连接事件(分离 HTML/JS)。由于您的项目中已经有 jQuery,这很容易。为此,您需要做的就是在图像上放置某种标识:
<img id="example" src="..." />
然后,您可以像这样在您的 ready() 函数中连接事件代码
$(document).ready(function() {
$("#example").dblclick(function() {
alert("Hello");
});
});
这具有以下优点:
ondblclick
- 允许代码的多个不同部分在同一对象上使用不冲突的事件处理程序如果您想从 HTML 访问它,您的函数应该是全局的(实际上是 window 对象的属性)。但最佳做法是避免使用全局变量和函数,而是使用命名空间:
// let's publish our namespace to window object
if (!window.myNamespace){
// creating an empty global object
var myNamespace = {};
}
// and add our function to it
$(document).ready(function() {
myNamespace.example = function(){ alert("hello"); }
});
我们可以像这样在 HTML 中使用它:
<img src="..." ondblclick="myNamespace.example()" />
@Esailija 已正确回答,但如果您想保持原样,则只需将其删除var
并使其成为全球性的。
var example;
$(document).ready(function() {
example = function() {
alert("hello")
}
});
如果你不把var
变量/函数/对象变成全局的。使用var
你在document.ready
函数中设置它的上下文。
您可以将函数声明移到 DOM-ready 处理程序之外:
function example(){ alert("hello") }
$(document).ready(function() {
// code
});
但更好的解决方案是将 JavaScript 保留在 .js 文件中并避免使用内联事件处理程序。给你的元素一个 id 并获取它:
<img src="..." id="imgid" />
$(document).ready(function() {
document.getElementById("imgid").ondblclick = function(){ alert("hello") }
});