preventing链接之前的jQuery加载 [英] Preventing Links before jQuery is Loaded
问题描述
如何能在我之前，jQuery的单击事件prevent链接加载？
原因是我有几个环节，使通过jQuery的AJAX功能AJAX调用，如果用户点击它们之前的jQuery框架加载浏览器不能触发jQuery的AJAX功能，将按照链接HREF =...
谢谢你。
编辑：我可以用这
＆LT; HEAD＆GT;
...
＆LT;脚本类型=文/ JavaScript的＆GT;
在window.onload = prevCl（）;
函数prevCl（）{
VAR链接= document.links [];
links.onclick =检查（）;
}
功能检查（）{
如果（typeof运算jQuery的=='不确定'）{
返回false;
}
}
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
四个选项供您：
选项0
再去读<一href="http://stackoverflow.com/questions/3811513/$p$pventing-links-before-jquery-is-loaded/3811984#3811984">Sean霍根的回答，他指出，这可能与代表团进行（卫生署！）和我放在一起的示例实现。
选项1
您可以的链接＃的的href 直到jQuery是加载，然后（如适用），将其更改为它真的应该。你可以存储什么的href 应该在数据 - 属性，如：
＆LT; A HREF =JavaScript的:;数据的href ='realtarget.html'＆GT;等等＆所述; / a取代;
然后：
jQuery的（功能（$）{
$（一个[数据的href]）。每个（函数（）{
变量$此= $（本）;
$ this.attr（HREF，$ this.attr（数据HREF））;
}）;
}）;
此外，最后一点只有当你真正需要做的HREF一个href。如果你是通过JavaScript处理一下，没必要。
如果验证是开发周期的一个显著的一部分，需要注意的形式，属性很重要数据XYZ 是无效的HTML4和前（浏览器不真正关心，但同样，如果你使用验证...）。他们成为有效的HTML5的。
选项2
使用内联的onclick 属性拦截点击之前，jQuery的装载和基本上说对不起，一会儿。因此，在剧本在热门标签您的文件中：
函数sorryLoading（）{
警报（对不起，该页面仍在加载，请稍等。）;
返回false;
}
...然后上的链接：
＆LT; A HREF =realtarget.html级='对不起'的onclick =返回sorryLoading（）;'＆GT;等等＆LT; / A＆GT;
...然后删除的onclick jQuery的负载：
jQuery的（功能（$）{
$（a.sorry）removeClass移除（'对不起'）ATTR（onclick事件，）。单击（yourRealClickHandler）。
}）;
（你可以离开的最后一位与NBSP;＆mdash;在点击呼叫＆NBSP;＆mdash;，如果他们不都具有相同的单击处理程序）
我用上面的类这些链接和其他人可能有一个内联的onclick （否则，出奇的选择一【点击】实际工作之间的区别在Chrome，Opera和Firefox的Linux和IE6和IE8在Windows上）。
选项3
因为它听起来像你想的页面是不起作用的，直到jQuery的负载，这里的另一种方法：
- 确保，对jQuery的脚本标记是在
头页面的部分（不是在底部，我通常建议把它）。 - 在页面的最下方，刚刚闭幕的
体标记之前，连上你的点击处理程序的没有的包装他们在一个jQuery.ready通话（或任何其快捷方式）。
原因是这样的：＃1将确保的jQuery本身之前的页面被呈现加载和＃2将尽快挂钩处理程序的尽可能的。谷歌建议使用的标签，在这样的页面端（而非就绪函数或类似），并说，在这一点上，DOM元素将准备成为发现了。
另外，当然，你要确保在此期间，链接不做用户期望的时间是绝对尽量简短做所有的页面加载优化的东西您可以。点击一个链接，没有它做什么，它看起来像它使一个不好的用户体验。
How can i prevent links on click event before jQuery is loaded?
The reason is i have few links that make AJAX calls through jQuery ajax functions and if user click them before jQuery framework is loaded the browser cant trigger jQuery ajax function and will follow links href="..."
Thanks.
Edit: Can i use this?
<head>
...
<script type="text/javascript">
window.onload = prevCl();
function prevCl() {
var links = document.links[];
links.onclick = check();
}
function check() {
if (typeof jQuery == 'undefined') {
return false;
}
}
</script>
</head>
Four options for you:
Option 0
Go read Sean Hogan's answer, he pointed out that this can be done with delegation (doh!) and I put together an example implementation.
Option 1
You can make the href of the links "#" until jQuery is loaded, and then (if appropriate) change it to what it really should be. You can store what the href should be in a data- attribute, e.g.:
<a href='javascript:;' data-href='realtarget.html'>blah</a>
Then:
jQuery(function($) {
$("a[data-href]").each(function() {
var $this = $(this);
$this.attr("href", $this.attr("data-href"));
});
});
Again, that last bit only if you really need to make the href an href. If you're handling the click via JavaScript, no need to.
If validation is a significant part of your development cycle, it's important to note that attributes in the form data-xyz are invalid in HTML4 and before (browsers don't actually care, but again, if you use validation...). They become valid as of HTML5.
Option 2
Use inline onclick attributes to intercept the click prior to jQuery loading and basically say "Sorry, one moment". So in a script tag at the top of your file:
function sorryLoading() {
alert("Sorry, the page is still loading, one moment please.");
return false;
}
...and then on the links:
<a href='realtarget.html' class='sorry' onclick='return sorryLoading();'>blah</a>
...then remove the onclick on jQuery load:
jQuery(function($) {
$("a.sorry").removeClass('sorry').attr("onclick", "").click(yourRealClickHandler);
});
(You can leave the last bit — the click call — off if they don't all have the same click handler.)
I've used a class above to differentiate between these links and others that might have an inline onclick (otherwise, surprisingly the selector "a[onclick]" actually works on Chrome, Opera, and Firefox for Linux and IE6 and IE8 on Windows).
Option 3
Since it sounds like you want the page to be non-functional until jQuery loads, here's another approach:
- Make sure that the script tag for jQuery is in the
headsection of your page (not at the bottom, where I'd normally recommend putting it). - At the very bottom of your page, just before closing the
bodytag, hook up your click handlers without wrapping them in ajQuery.readycall (or any of its shortcuts).
The reason is this: #1 will ensure that jQuery itself is loaded prior to the page being rendered, and #2 will hook up the handlers as soon as possible. Google recommends using a tag at the end of the page like that (rather than a ready function or similar) and says that at that point, the DOM elements will be ready to be discovered.
Separately, of course, you want to ensure that the time during which the links don't do what the user expects is absolutely as brief as possible by doing all of the page-load optimization stuff you can. Clicking a link and not having it do what it looks like it does makes for a poor user experience.
这篇关于preventing链接之前的jQuery加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
