首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >究竟什么时候执行$(.ready)文档回调?

究竟什么时候执行$(.ready)文档回调?
EN

Stack Overflow用户
提问于 2010-07-11 01:47:54
回答 3查看 8.9K关注 0票数 75

假设我们在$(document).ready回调中将一个.click()处理程序附加到一个锚(<a>)标记。此处理程序将取消默认操作(在href之后)并显示警报。

我想知道的是回调将在什么时候执行,以及用户是否可以单击锚点(文档已经显示在浏览器中),但事件尚未附加。

下面是包含锚点的不同HTML页面,但脚本的包含顺序不同。它们之间有什么区别(如果有的话)?不同的浏览器会有不同的表现吗?

Page1:

代码语言:javascript
复制
<html>
<head>
    <title>Test 1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(function() {
        $('a').click(function() {
            alert('overriding the default action');
            return false;
        });
    });
    </script>
</head>
<body>
    <a href="http://www.google.com">Test</a>
</body>
</html>

Page2:

代码语言:javascript
复制
<html>
<head>
    <title>Test 1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
</head>
<body>
    <a href="http://www.google.com">Test</a>
    <script type="text/javascript">
    $(function() {
        $('a').click(function() {
            alert('overriding the default action');
            return false;
        });
    });
    </script>
</body>
</html>

Page3:

代码语言:javascript
复制
<html>
<head>
    <title>Test 1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <a href="http://www.google.com">Test</a>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(function() {
        $('a').click(function() {
            alert('overriding the default action');
            return false;
        });
    });
    </script>
</body>
</html>

那么,有没有可能用户通过单击锚点而被重定向到href,并且永远看不到警报(当然,忽略javascript禁用的情况)?在我提供的任何示例中,都会发生这种情况吗?

我所需要做的就是确保click事件处理程序已经附加到锚点上,然后用户才有可能单击该锚点。我知道我可以提供一个空的href,然后在javascript中逐步增强它,但这是一个更一般的问题。

如果web服务器快速生成HTML,但从远程服务器获取jquery库需要时间,会发生什么情况?这会影响我的场景吗?与加载DOM相比,脚本的包含顺序是什么?它们能并行完成吗?

EN

回答 3

Stack Overflow用户

发布于 2010-07-11 02:40:40

在YUI中,有onContentReady()onAvailable()方法。不幸的是,在jQuery中没有类似的东西。然而,有一个插件受到了它们的启发:

http://www.thunderguy.com/semicolon/2007/08/14/elementready-jquery-plugin/

这应该允许您在DOM完全加载之前将事件绑定到锚点。

票数 2
EN

Stack Overflow用户

发布于 2010-07-11 02:13:39

您的第三个示例提供了用户在没有附加覆盖处理程序的情况下单击的最大机会。浏览器通常会先下载并解析每个<script>,然后再转到下一个。您正在从外部来源(谷歌)引入jQuery --虽然可能是可靠的,但可能不可用或加载速度很慢。在文档<body>的末尾有两个<script>块,所以在处理最后两个脚本时,页面的前面区域可能已经下载并呈现到屏幕上了。虽然这种方法是为了向用户呈现响应式的页面加载体验,但他们可以在这个不确定的时间段内单击,当然覆盖处理程序还没有附加。

有一篇关于脚本和加载顺序here的有趣的YUIblog文章。

票数 1
EN

Stack Overflow用户

发布于 2010-07-11 02:06:06

可以肯定的是,可以“欺骗”警报警告(即使启用了Javascript )。尝试在url字段中拖动链接,您将看到它将在没有该警告的情况下执行。如果链接触发了删除操作,这就特别成问题了。

关于document.ready回调-我也有这样的问题。让我解释一下。我们正在做一个项目,所有的表单都显示在弹出窗口(jQuery窗口)中。因此,当弹出窗口关闭时(暂时),页面会重新加载,并且我遇到了重定向到另一个屏幕而不是打开新弹出窗口的情况。

完全同意user384915将javascript直接放在onClick事件上,或者更好地放到href标签上。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/3220242

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档