为什么我不能使用onClick在jQuery $（document）.ready函数中执行函数？

我是新来的Javascript和jQuery。我想点击一个按钮并执行一个js函数。（对于这个例子，这只是一个警报，但它实际上是一个阿贾克斯函数。）

第一个警报出现，但是当我单击按钮后，我从来没有看到第二个（“做过”）警报。它看起来像javascript不认为doIt（）函数是在点击按钮时定义的。

下面是相关代码：

$(document).ready(function() 
{ 
    alert('ready'); 

    function doIt() { 
     alert('did it'); 
    }; 
} 
) 

<body> 
    <input name="Go" type="button" value="Go" onclick="doIt();"/> 
</body>

来源

2010-07-30 jalperin

这是因为该功能在全球范围内，这是你的onclick=""正在寻找它。您需要将其移到外面的document.ready（所以它不是完全作用域是闭合），或document.ready内将其绑定（更好的IMO的方法），这里就是我的意思是每个：

内绑定它（删除您onclick=""此）：

$(document).ready(function() { 
    alert('ready'); 
    $("input[name='Go']").click(doIt); 
    function doIt() { 
    alert('did it'); 
    } 
});

或匿名版本（再次删除您onclick=""）：

$(document).ready(function() { 
    alert('ready'); 
    $("input[name='Go']").click(function() { 
    alert('did it'); 
    }); 
});

或外部移动它（保持你的onclick=""）：

$(document).ready(function() { 
    alert('ready'); 
}); 
function doIt() { 
    alert('did it'); 
}

来源

2010-07-30 13:03:44

或将它保留在里面，但声明它是一个全局函数（保持你的onclick） – Konerak 2010-07-30 13:13:23

我实际上做这些，根据情况。例如，我有时会使用包含Javascript的.ascx文件，并且当我这样做时，将函数放在限制函数的范围内，但其他时候我想要一个我从多个包含的全局函数 - 在这种情况下，我将该功能移到范围之外。所以，这两个选项都有用处。 – 2010-07-30 13:19:25

你需要做的是使用jQuery这样的“click”事件绑定到它。

jQuery(document).ready(function($) { 

    $('#my_button').click(function() { 

     alert('i was clicked'); 

    }); 
}); 

<input type="button" id="my_button" value="Go" />

这里是为您直播的jsfiddle演示：http://jsfiddle.net/8A5PR/

这里是你的手册页：http://api.jquery.com/click/

来源

2010-07-30 13:03:42

不，onClick是正确的。 – Konerak 2010-07-30 13:04:38

@Konerak我认为你错过了这一点，它允许你从标签中提取onclick事件管理，并将它放入带有函数的javascript中，因此你可以在执行功能保持不变的情况下管理与标记分开的代码（行为）相同 - 处理页面上元素的点击事件。 – 2010-07-30 13:10:27

@Mark - 我不认为@Konerak完全错过了这一点。这个答案表明你*“需要使用jquery绑定一个点击事件给我们”*。这是不正确的。用jQuery绑定事件是一个选项，但你不需要这样做。 – user113716 2010-07-30 13:15:20

你在你的document.ready作为一个函数语句定义doIt方法。

要么你应该使用函数表达式 或声明函数了准备功能的。

$(document).ready(function() 
{ 
    alert('ready'); 

    doIt = function() { //now has global scope. 
     alert('did it'); 
    }; 
} 
) 

<body> 
    <input name="Go" type="button" value="Go" onclick="doIt();"/> 
</body>

（是的，的onClick是不是真的这样做，而且也应该在准备函数定义的点击事件处理被替换的jQuery的方式，但它作品，并允许。

来源

2010-07-30 13:04:17 Konerak

你确定这可以吗？ “doIt”仍在本地范围内声明。 – fearofawhackplanet 2010-07-30 13:11:13

如果我会把'var doIt'，你会是对的。省略'var'声明一个全局变量。 – Konerak 2010-07-30 13:12:22

+1然后教我新的东西。这是一个jQuery功能或适用于一般的JavaScript？ – fearofawhackplanet 2010-07-30 13:20:08

什么你现在正在做的只是把一个函数doIt（）放在一个（所有意图和目的）window.onload事件中，除非你将它绑定到一个元素，否则它将永远不会被调用document.ready的范围

您需要移动您的fu因此可以通过外部事件调用。

只是一个小链接以供参考：http://www.webdevelopersnotes.com/tutorials/javascript/global_local_variables_scope_javascript.php3

来源

2010-07-30 13:06:15

从文档：“With $（document ）.ready（），你可以让你的事件加载或触发，或者在窗口加载之前让你想要它们做的任何事情。“ http://docs.jquery.com/Tutorials:Introducing_$（document）.ready（） – 2010-07-30 13:23:24

哦，我犯了一个错误，我猜这是在window.onload之前。 – 2010-07-30 13:46:39

只是理解:)不是一个错误:)另一种说法是“当DOM准备就绪”时，这样页面可能不会100％渲染，但DOM（文档对象模型）已准备就绪。 – 2010-07-30 13:50:33

尝试......

$(document).ready(function() { 


    alert('ready'); 


     $("#Go").submit(function(event) { 
      alert('did it'); 
     }); 

}); 

<input name="Go" id="Go" type="button" value="Go" />

来源

2010-07-30 13:06:21

可能是我迟到发布回答因为答案已经发布.. 不用担心:) – 2010-07-30 13:08:03

JavaScript有两种范围，全局和功能级别。如果你在一个函数内部声明doIt，它在函数外部是不可见的。有几种方法来解决它

//just declare the function outside the ready function 
$(function() { 
}); 
function doIt() { alert('did it'); } 

//decare a variable outside the function 
var doIt; 
$(function() { 
    doIt = function() { alert('did it'); } 
}); 

// if you dont use var, variables are global 
$(function() { 
    doIt = function() { alert('did it'); } 
})

来源

2010-07-30 13:07:15

$(document).ready(function() 
{ 
});

是一个事件处理程序的document.ready，该处理程序中的功能是范围之内。

一个更好的方法是在你的click事件中插入一个处理程序，然后在那里调用该函数。

$(document).ready(function() 
{ 
    alert('ready'); 

    $('body input').click(function(){ 
    doIt(); 
    }); 
    function doIt() { 
     alert('did it'); 
    }; 
});

这也有从您的标记删除代码中的副作用（一件好事），你可以从你的输入标签的onclick删除。

来源

2010-07-30 13:07:35

是的，正如其他人所提到的，您真的需要将该功能移到jquery ready声明之外。另请注意，javascript区分大小写，因此您应该使用onClick而不是onclick。问候

来源

2010-07-30 13:08:15 Muleskinner

其实，它不是javascript。它是一个HTML属性。 'onclick'将会工作得很好，就像'oNcLiCk'一样。 – user113716 2010-07-30 13:28:17

为什么我不能使用onClick在jQuery $（document）.ready函数中执行函数？

回答

相关问题