如何按需從JavaScript而不是（document）.ready運行jQuery函數？

Question

我正在使用基於jQuery的$(document).ready的教程編寫一些代碼，該頁面在頁面加載（或文檔准備就緒）后立即開始工作。 代碼非常標准（據我對jQuery的了解很少），並且在頁面加載時可以正常工作。

$(document).ready(function () {
    // Do stuff here
});

但是現在我想更改它，以使代碼從某個函數運行。 我最初的想法是我可以將功能更改為此

$(function dothis() {
    // Do stuff here
});

然后用dothis（）調用它； 但是當我這樣做時，出現“ dothis is not defined”錯誤。 我也嘗試了幾種不同的方法，但無法弄清楚。 我需要做些什么才能使它按我想要的方式工作？

function searchCustomers() {
    var searchvalue = document.getElementById('searchText2').value;
    var searchtype = document.getElementById('searchType2').value;

    //Just checking to make sure this part is working...
    //alert(searchtype + '  ' + searchvalue)

    // Run the "Do Stuff here"

    var showDiv = document.getElementById('divCustomerGrid');
    showDiv.style.display = 'block';
};

Answer 1

解開它

$(function dothis() {
    // Do stuff here
});

應該

function dothis() {
    // Do stuff here
}

Answer 2

或者像這樣：

var dothis = function(){
  //...
}

Answer 3

如果函數內的代碼正在處理DOM，則必須確保文檔已准備好，因此在這種情況下，您可以簡單地在外部聲明命名函數，然后僅在文檔內部調用它，並附加所有事件處理程序。從那里調用您的函數。 您還應該考慮對整個事件鏈進行草稿以了解依賴性。

Answer 4

請記住，jQuery不是一種語言。 使用jQuery的所有內容都只是javascript，因此創建函數的方式與創建其他javascript函數的方式相同。

如果我像這樣重寫您的第一個示例，這將使其更加清晰：

function doStuff() {
    // Do stuff here
}
var doc = jQuery(document);
doc.ready(doStuff);

這與您編寫的內容具有完全相同的效果-我們正在定義一個函數，並將其作為文檔的ready事件的事件處理程序傳入。 因此，如果您想從其他地方調用doStuff() ，則可以像執行其他任何函數一樣進行操作。

此外，如果稍后嘗試基於事件調用doStuff() ，則可以將其綁定到其他事件，而不是文檔就緒事件。 例如：

$('#myBtn').click(doStuff);

單擊#myBtn元素時，它將調用doStuff() 。 在這種情況下，整行應該發生在document.ready事件內部，因此我們可以確定#myBtn元素確實存在。 可能看起來像這樣：

$(document).ready(function() {
    $('#myBtn').click(doStuff);
});

但是-基於一些評論，我懷疑您只是想將其放在函數中，因為必須使用jQuery。 既然不是這種情況，您可以直接將jQuery命令放到searchCustomers()函數中，而不用調用一個函數（假設您沒有從多個地方調用它）。

---

綜上所述，您可以在代碼中進行幾個不相關的優化。

1. 將函數直接傳遞到jQuery或$函數中是分配document.ready事件處理程序的快捷方式。 因此，您可以這樣編寫原始示例：

    $(function () { // Do stuff here }); 

2. 您可以使用jQuery簡化您在searchCustomers()函數中已經做的許多事情。 我會這樣重寫它：

    function searchCustomers() { var searchvalue = $('#searchText2').val(); var searchtype = $('#searchType2').val(); //Just checking to make sure this part is working... //alert(searchtype + ' ' + searchvalue) // Do more jQuery stuff here $('#divCustomerGrid').show(); };