onclick函數需要執行一個簡單的javascript函數

Question

我有一個按鈕，我嘗試在其中添加點擊jQuery，如下所示

<button onclick="myFunction()">YES</button>

和

$(document).ready(function() {
    function myFunction(){
        $('#mycheckboxdiv').toggle();
        $("div#headersteptwo").addClass("hidden");        
    }
})

但是，單擊時我會收到Uncaught ReferenceError：未定義myFunction

我在做什么錯以及如何解決這個問題？

更新了一個示例jsfiddle

http://jsfiddle.net/3aC7W/1/

Answer 1

我在做什么錯以及如何解決這個問題？

您正在另一個函數中定義函數，即該函數未在全局范圍內定義，因此內聯事件處理程序無法找到該函數。

只需刪除$(document).ready(function() {因為您在那里不需要它：

function myFunction(){
    $('#mycheckboxdiv').toggle();
    $("div#headersteptwo").addClass("hidden");        
}

您只需要使用$(document).ready(function() { ... }); （如果您操作DOM，並且僅當您將腳本放在HTML文檔中的元素之前）。

---

當然，更好的解決方案是將事件處理程序與jQuery綁定（而不使用內聯事件處理程序）：

$(document).ready(function() {
    $('button').on('click', function(){
        $('#mycheckboxdiv').toggle();
        $("div#headersteptwo").addClass("hidden");        
    });
});

您可能必須在按鈕上添加一個類或ID，以使選擇器更加具體。 看一下可用選擇器的列表 。

Answer 2

將您的代碼更改為此方式以實現click：

<button id="myFunction">YES</button>

和

$(document).ready(function() {
    $('#myFunction').click(function(e){
        $('#mycheckboxdiv').toggle();
        $("div#headersteptwo").addClass("hidden");
    });
});

在以下位置檢查它： http : //jsfiddle.net/aneesh_rr/XJ758/3/

Answer 3

將您的代碼更改為此：

$(document).ready(function() {
    window.myFunction = function(){  //you should make myFunction avaliable in global
        $('#mycheckboxdiv').toggle();
        $("div#headersteptwo").addClass("hidden");        
    }
})