$（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") }
});