什么函数在$(document).ready()
我只是不明白。 我搜索和搜索,但为此我只是无法弄清楚什么是“正确的”。
有三个例子。
1) 小提琴1.0这里我们有html
with onlick="function"
和javascript
函数就在那里工作正常
CLICK HERE function someFunction(obj,nr) { var string = $(obj).attr('class'); $('.result').text( string ); }
2) 小提琴2.0然后当我将函数移动到脚本部分(将其移动到.js文件)时,我收到错误“ReferenceError:someFunction not defined”
这就是问题开始的地方
3) 小提琴3所以现在我有一个函数在文件就绪调用.on(点击它总是工作正常。这个函数调用另一个函数,在docuemnt.ready()之外,也工作正常。
所以问题。 我何时必须定义函数where AND WHY以便它始终有效?
谢谢!
示例3)中的所有代码如下所示:
result CLICK HERE CLICK HERE CLICK HERE CLICK HERE ready Call other function $(document).ready(function(){ $('.ready').text( 'dom is ready' ); function someFunction(obj,nr) { var string = $(obj).attr('class'); $('.result').text( string ); } $( "span.callOtherFunction" ).on({ click: function() { $(this).css("color","red"); $(this).addClass("xyz"); otherFunctionCallingFunction($(this)); } }); }); function otherFunctionCallingFunction($me) { $('.callOtherFunction').append( ' --> ' + $me.attr('class') ); }
您看到的很多内容是因为jsFiddle 非常令人惊讶的默认设置,即将代码包装在onload
处理程序的脚本窗格中。 所以你的代码被包装在一个函数中,而不再是全局范围(如果你使用onclick
style属性,那就是函数需要的地方)。 您可以使用左侧的下拉框(第二个,在库和脚本列表下)更改此设置。 将其更改为“无包装”以包含未包装的代码。
你不是(到目前为止)第一个被这个令人惊讶的默认值所困扰的人。
回答你的主要问题:
什么函数在$(document).ready()
如果您控制加载脚本的script
标记的位置,您基本上不必使用ready
; 相反,只需确保您的script
标记位于HTML的末尾 ,就在结束 。
当然,你可以使用ready
。 这样做的原因是确保在代码运行之前已经创建了所有DOM元素。 但是如果你把script
标签放在最后,那就已经是真的了。 您仍然可以在ready
处理程序之外定义函数(如果您希望它们是全局变量),但是如果您使用ready
,则可以从ready
处理程序中调用它们,以便元素存在。
FWIW,我会避免使用onclick
style属性来挂钩事件处理程序,主要是因为它们需要你创建全局函数。 我宁愿避免创建任何全局符号,我可以避免它。
我建议的一般forms:
你的脚本看起来像这样:
(function($) { // A scoping function that wraps everything // Hook up event handlers here. You can use `$` for jQuery, even if // you've used noConflict, because we have a private `$` symbol (see // the `$` argument above) // The body of your code goes here })(jQuery); // <== Note how we're passing the jQuery reference in // and immediately executing the scoping function
这是一个完整的例子: Live Copy
Script Placement Example
在JavaScript中,范围是基于每个函数处理的。 函数范围内的任何内容都可以访问该函数范围内的其他内容以及更广泛范围内的内容。
在函数内部使用var
定义变量会将该变量的范围限制为该函数。
在另一个函数内使用函数声明定义函数将限定函数的范围限制为容器函数。
使用ready
,将函数传递给它。 当然,该函数中定义的任何内容都限定为该函数。 由于它是作用于该函数的范围,因此它不是全局的。 您的onclick属性未在该函数的范围内定义,它只能访问全局变量。 这就是您收到参考错误的原因。
避免全局变形。 他们使事情难以维持。 避免使用onclick
属性,它们通常依赖于全局变量。
如果您希望在完全构造DOM之后运行代码,则需要使用ready
。 如果您想使用JS将事件处理程序绑定到其中的元素(例如,使用jQuery.on
),这将非常有用。 这样做而不是使用onclick
属性。