在阅读了这个问题How to prevent default event firing but still allow event to bubble之后,我仍然遇到没有阻止事件的问题,当点击链接时,它会将用户带到页面顶部。
我的HTML是:
<div class="ajax-load"><a href="/?show=all" id="set-home">HOME</a></div>
<div id="preContent">
<div id="content">
//SOME CONTENT
</div>
</div>
我的jQuery是:
jQuery('.ajax-load').click(function() {
//DO SOME STUFF
//LOADS SOME URL INSIDE A DIV
return false;
});
jQuery('#set-home').click(function(event) {
event.preventDefault();
//DO SOME STUFF
//SETS SOME NEW ATTRIBUTES FOR ANOTHER ELEMENT
});
我需要防止父级和子级的默认行为并允许冒泡。
当我点击#set-home
时,我正在更改另一个元素中的属性,同时.ajax-load
会触发一个在元素中加载和填充的函数。
这是我对.ajax-load
var mainContent = jQuery("#preContent"),
is_ajaxed_page = "",
everPushed = false,
jQuery(".ajax-load").on("click infinite", "a", function() {
_link = jQuery(this).attr("href");
history.pushState(null, null, _link);
everPushed = true;
jQuery(mainContent).waypoint("destroy");
loadContent(_link);
return false;
});
function loadContent(href){
jQuery(mainContent)
.find("#content")
.fadeOut(100, function() {
jQuery(mainContent).hide().load(href + " #content", { is_ajaxed_page: "yes" }, function() {
jQuery(mainContent).fadeIn(100, function() {
infscroll();
});
});
});
}