javascript - $(document).ready() 中定义的调用函数

Question

我拥有的内部和外部 JS 文件

$(document).ready(function() {
    var example = function(){ alert("hello") }
});

我想从我的 html 中调用该函数，我该怎么做？

<img src="..." ondblclick="example()" />

nb 我知道jquery dblclick()但对如何正确执行上述操作感到好奇。

Answer 1

$(document).ready(function() {
    window.example = function() {
        alert("hello")
    }
});

如果可能的话，或者在外面定义它。看起来它根本不需要在文档中定义。

Answer 2

最好的选择是简单地在外部定义函数document.ready()。没有$(document).ready()必要在事件中定义函数，就好像你在函数中调用$(document).ready()函数一样，保证文档准备就绪。

但是，您也可以在全局窗口对象上定义函数，如下所示：

$(document).ready(function() {
    window.example = function(){ alert("hello") }
});

Answer 3

此处的其他解决方案将起作用，但在您的项目结构上，最好的解决方案是从 HTML 中删除事件处理代码并完全通过 javascript 连接事件（分离 HTML/JS）。由于您的项目中已经有 jQuery，这很容易。为此，您需要做的就是在图像上放置某种标识：

<img id="example" src="..." />

然后，您可以像这样在您的 ready() 函数中连接事件代码

$(document).ready(function() {
    $("#example").dblclick(function() {
        alert("Hello");
    });
});

这具有以下优点：

1. 它不创建全局变量 - 减少全局命名空间污染。
2. 它将 HTML 与 javascript 分开，将控制行为的所有代码保持在一个紧凑的位置，通常是一件好事
3. 使用事件监听器比使用 . ondblclick- 允许代码的多个不同部分在同一对象上使用不冲突的事件处理程序

Answer 4

如果您想从 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()" />

Answer 5

@Esailija 已正确回答，但如果您想保持原样，则只需将其删除var并使其成为全球性的。

var example;
$(document).ready(function() {
  example = function() {
    alert("hello")
  }
});

如果你不把var变量/函数/对象变成全局的。使用var你在document.ready函数中设置它的上下文。

Answer 6

您可以将函数声明移到 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") }
});