我正在开展一个项目,我正在使用大量的ajax调用来使网站交互更加优雅。我一直在使用的过程是获得脚本的链接,该脚本执行在链接标记中存储为href的相应操作。然后我使用jquery来定位该元素并禁用默认操作并执行ajax调用。
问题是,在用户点击链接之前,$(document).ready()
函数有时无法正确执行或延迟执行。这导致页面通过正常的浏览器加载打开。
我已经实现了代码,用于检测代码是通过ajax还是通过浏览器执行,所以所有这些都是加载空白页面。在某些情况下,我可以让它检测执行类型并以不同的方式响应,但在其他情况下,如果它不是由ajax执行则会导致问题。
有没有办法确保链接的默认操作始终被禁用,无论页面的加载进度如何,或者是否有比我正在采用的方法更好的方法?
答案 0 :(得分:3)
为什么不使用这样的代码:
<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>
取自:Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?
答案 1 :(得分:3)
您可以在全局范围内运行代码,只需将JS代码块放在您正在使用的DOM元素(链接)之后。这样您就不依赖于事件处理程序来触发。在结束</body>
标记之前放置代码块是个好地方。
<a class="my-links" href="/path/to/server-side.***"></a>
<script>
function myFunc () {
$.ajax({
url : $(this).attr('href'),//use the href attribute for the link clicked as the URL for the AJAX request
type : 'get',
success : function (serverResponse) {
alert('Success');
},
error : function () {
alert('Error');
}
});
//in a jQuery event handler, returning false is the same as calling: event.preventDefault(); event.stopPropagation()
return false;
}
$('.my-links').bind('click', myFunc);
</script>
</body>
答案 2 :(得分:1)
我能想到的一件事是将href值设置为哈希值。这将导致点击链接基本上什么都不做。然后,您可以将URL存储在数据属性中。
<a href="#" data-url="http://..." >go</a>
$('a').click( function() {
var url = $(this).data('url');
});
答案 3 :(得分:0)
试试这个。
$('a').click( function(e) {
e.preventDefault();
});
答案 4 :(得分:0)
如果您希望阻止来自html的默认操作,那么类似的内容将起作用:
<a onclick="some_function(); return false;"></a>
这不会污染您的网址#并且您不必在元素上设置href属性。此解决方案与使用jQuery的单击事件函数中的event.preventDefault();
基本相同。
答案 5 :(得分:0)
这里的挑战仍然不引人注目。一种方法是使用html5数据属性。您可以做的是指定链接的href:
<a href="#" data-href="actual/file/path.html">
然后在您的document.ready中,您可以将数据属性内容交换到href属性,或者让您的单击处理程序使用数据属性而不是href属性。这样,如果用户在您的javascript绑定之前单击链接,则不会发生任何事情。要交换所有data-href属性信息,适当的href只使用jquery:
$(document).ready(function(){
$("a[data-href]").each(function(){
$(this).attr("href",$(this).attr("data-href"));
});
});