Question

我有一个按钮，我试图添加点击jquery，如下所示

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

和

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

然而，点击后我得到未捕获的ReferenceError：myFunction未定义

我做错了什么以及如何解决这个问题？

更新了示例jsfiddle

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

Answer 1

我做错了什么以及如何解决这个问题？

您正在另一个函数中定义函数，即函数在全局范围内定义不，因此内联事件处理程序无法找到。

只需删除$(document).ready(function() {，因为您不需要它：

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

如果操作DOM，只需将脚本放在HTML文档中的元素之前，就必须使用$(document).ready(function() { ... });。

当然，更好的解决方案是使用jQuery绑定事件处理程序（而不是使用内联事件处理程序）：

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

您可能必须向按钮添加类或ID，以使选择器更具体。看看list of available selectors。

Answer 2

将代码更改为以这种方式实现点击：

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

onclick函数需要执行一个简单的javascript函数

3 个答案: