假设我们附加一个 .click() <a> 中的 anchor ( $(document).ready) 标记的处理程序打回来。此处理程序将取消默认操作(在 href 之后)并显示警报。
我想知道回调将在何时执行，用户是否可以点击 anchor (文档已显示在浏览器中)但事件尚未附加。
以下是包含 anchor 的不同 HTML 页面，但脚本的包含顺序不同。它们之间有什么区别(如果有的话)？不同的浏览器会有不同的行为吗？
第 1 页:
<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>
第 2 页:
<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>
第 3 页:
<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通过单击 anchor 并且永远不会看到警报(当然忽略禁用 javascript 的情况)？这会发生在我提供的任何示例中吗？
我只需要确保 click在用户有任何可能点击这个 anchor 之前，事件处理程序已经附加到 anchor 。我知道我可以提供一个空的 href然后在 javascript 中逐步增强它，但这是一个更普遍的问题。
如果 Web 服务器快速生成 HTML 但 jquery 库需要时间从远程服务器获取，会发生什么情况？这会影响我的场景吗？与加载 DOM 相比，脚本的包含顺序是什么？它们可以并行完成吗？
最佳答案
示例 3 将有最高的机会用户能够在处理程序尚未附加自身的情况下单击链接。由于您在呈现链接后加载 jQuery 库，如果 Google 的服务器有点慢(或 DNS 查找需要一秒钟左右)，或者用户计算机处理 jQuery 的速度很慢，当用户尝试单击链接时，链接将不会附加其点击处理程序。
另一种可能发生这种情况的情况是，如果您的页面非常大或加载速度很慢，而此链接位于顶部。那么当部分 DOM 可见时，DOM 可能还没有完全准备好。如果您遇到这样的问题，最安全的做法是:
- 在
head中加载 jQuery (示例 1 或 2) - 在
<a>之后立即附加点击事件元素，但不在 DOMReady 回调中。这样它将立即被调用，而不会等待文档的其余部分。
一旦元素被渲染，它就可以从 DOM 中获取，随后 jQuery 可以访问它:
<a href="http://www.google.com">Test</a>
<script type="text/javascript>
// No (document).ready is needed. The element is availible
$('a').click(function() {
alert('overriding the default action');
return false;
});
</script>
此外，根据 user384915 的评论，如果操作完全依赖于 JavaScript，那么甚至不要将其呈现为 HTML 的一部分，在 jQuery 准备好后添加:
<script type="text/javascript">
jQuery(function($){
$("<a />", {
style: "cursor: pointer",
click: function() {
alert('overriding the default action');
return false;
},
text: "Test"
}).prependTo("body");
});
</script>
关于javascript - $(document).ready 回调什么时候执行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3220242/