标题问题说明了一切。在大多数情况下,我理解后一种情况。读取Javascript时,对DOM的引用必须具有某种含义,这就是为什么我们将其包装在$(document).ready回调中,或将我们的脚本置于<body>下的原因。我真的不明白为什么$(document).on(...)不管位置如何似乎都能工作。

任何输入都是浓汤。

最佳答案

当您执行$(anything)时,任何对象都必须在运行该选择器时存在。

当您进入<head>部分时,document对象已经存在,因为它是整个页面的主父对象。但是,体内什么都不存在,所以$(“.class”)将不存在,因此选择器将找不到任何东西(或者更糟糕的是,由于该身体还不存在而失败了)。

但是$(document)确实最早存在,您可以运行脚本(在<head>部分中,因此$(document)可以工作并且具有将事件处理程序附加到其中的功能。

如果要在<body>中查找元素(例如示例$(".class")),则要么必须等待<body>部分加载jQuery的.ready()之类的东西(这样这些元素在脚本运行之前就已经存在) ),或者您必须将脚本实际放置在<body>之后,以便在运行脚本时已解析了所需的元素。



如果要对.on()使用委托事件处理,则需要添加以下内容:

$(mySelector).on("click", ".myClass", fn);


然后,$(mySelector)中的对象就是事件处理程序将直接附加到的对象,并且这些对象是运行此行代码时必须存在的对象。运行此代码时,与".myClass"匹配的对象不必存在。因此,如果通过以下方式附加到文档对象来进行委托事件处理:

$(document).on("click", ".myClass", fn);


然后,在运行此代码行时,仅document对象必须存在。由于document对象是首先创建的,因此当您可以运行javascript代码时该对象已经存在,因此它似乎总是可以正常工作。

这引发了一个有趣的问题,即您是否可以仅将所有事件处理程序附加到document对象。如果这样做,则需要进行一些权衡(某些事件仅在直接附加到源对象的情况下才能正常工作),因此不应在不了解后果的情况下盲目地这样做。有关将所有事件附加到文档对象上的折衷的详细讨论,请参见this answer

关于javascript - 为什么必须将$(“。cl”)。on(..)放置在$(document).ready回调中或<body之后,而将$(document).on(..)放置在页面上的任何位置? >?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/23184413/

10-12 07:27
查看更多