标题问题说明了一切。在大多数情况下,我理解后一种情况。读取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/