Question

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

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

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的函数内执行此操作。）

全局（通常）要尽可能避免某些事情，内在事件属性通常依赖于它们。

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

$(document).ready(function(){

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

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

demo

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

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

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

中

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

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

5 个答案: