为什么这个简单的onclick功能不起作用

Question

为什么这个简单的代码不起作用？ 有人可以向我解释一下吗？

的jsfiddle

我在onclick属性中调用了cc()函数。

HTML

<div> hey </div>
<button onclick="cc()"> click me to change color</button>

使用Javascript

$(document).ready(function () {
    function cc() {
        $('div').css('color', 'red');
    };
});

Answer 1

cc不是全局函数。

它由函数声明定义，因此它的作用域是定义它的函数。

该函数是您传递给ready方法的匿名函数。 （并且您在由于jQuery配置而运行onload的函数内执行此操作）。

---

Globals（通常）是要尽可能避免的东西，而内在事件属性通常依赖于它们。

不要使用内部事件属性。 使用JavaScript绑定JavaScript事件处理程序。 由于您使用的是jQuery，请使用on方法。

$(document).ready(function(){

    function cc(){
        $('div').css('color','red');
    };

    $('button').on('click', cc);
});

演示

Answer 2

onclick属性中的代码只能访问全局函数/变量。 函数cc对于它定义的函数是本地的。你要么在函数之外定义它（因此它是自动全局的）或者将它分配给window.cc以明确地使它成为全局的（我建议第二个选项） ）。

Answer 3

你应该在document.ready附加处理程序。就像这样

HTML

<div> hey <div>
    <button  id="mybutton"> click me to change color</button>

的javaScript

$(document).ready(function(){
    //attach the function here
    $("#mybutton").click(
        function (){
           $('div').css('color','red');
        }
    );

});

DEMO

Answer 4

CC是全球性的

我已经更新了你的工作实例

HTML

<div> hey <div>
<button> click me to change color</button>

使用Javascript

$('button').click(function()
{
    $('div').css('color','red');                       
});

http://jsfiddle.net/zWtZ2/4/

我通常不这样做，但我想给你最小的代码更改。 当您选择div上的每个按钮时。

Answer 5

正如Quentin所说，cc不是一个全球性的功能。

但是，函数需要在调用之前声明。 所以在小提琴中，你应该将函数包装在head 。

更新的演示： http ： //jsfiddle.net/zWtZ2/3/