$（document）.ready（）中定义的调用函数

Question

我和外部JS文件

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

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

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

我知道jquery dblclick（），但很好奇如何正确地执行上述操作。

Answer 1

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

或者如果可能的话，在外面定义它。 它看起来似乎不必在文档内部定义就绪。

Answer 2

最好的选择是简单地定义document.ready()之外的函数。 没有理由在$(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变量/ function / object变成全局变量。 使用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") }
});