如何在使用jQuery淡入淡出选项显示或隐藏元素时阻止页面跳转到顶部

有很多问题，我试过了。

我在做什么

我正在使用jQuery fadeIn和fadeOut选项隐藏div并使用下面的jquery显示列表，但页面一直跳到顶部。 将显示的列表是动态的。

我试过e.preventDefault(); 并return false; 但没用

我尝试将锚标记更改为span标记，但第二个onClick函数不起作用。

这是因为我的内容长度是动态的，使它看起来像跳跃还是真正的跳跃？

提前致谢。

HTML

 
 
20
 CATEGORIES 
1
 
 
 
 
Chef's Special
 
 
 
Lunch
 
 
 
Snacks
 
 
 
Dinner
 
 
  
  

JS

  $(document).ready(function(){ $('body').on('click', '.category', function(){ var category = $(this).data('categories'); //alert(category); $('.category').fadeOut(300); $.ajax({ type: "POST", url: "./assets/listproducts.php", data: {cat: category}, cache: false, success: function(response){ //console.log(response); $('#nav').html('<- BACK').addClass('back'); $('.items').html(response).delay(400).fadeIn(300); } }); }); $('.back').on('click', function(e){ $('.items').fadeOut(300); $('.category').html(response).delay(400).fadeIn(300); $('#nav').html('CATEGORIES').removeClass('back'); e.preventDefault(); }); });  

CSS

 ul.items { padding:0; margin:0; display:none; } 

Answer 1

你的第二个.back onclick永远不会开火。

它无论是时间（作为a还是span ）都不起作用 – 当它是a ，默认点击将触发，它将带你到顶部。

这是因为当你调用$('.back').on('click'..) ，没有.back元素可以连接，因为你还没有将该类添加到后退按钮。

您需要使用事件委派： https ： //stackoverflow.com/a/1688293/2181514

将您的活动连线更改为：

 $("document").on("click", ".back", function.... 

然后它将获取动态更改的类

Answer 2

我怀疑你的.back上的click事件.back完全注册，因为事件被绑.back ， .back不存在。 因此它与点击没有href链接一样好。

您需要委托点击.back到document 。 需要此委派是因为您要动态添加back 。

  $(document).on('click','.back', function(e){ e.preventDefault(); $('.items').fadeOut(300); $('.category').html(response).delay(400).fadeIn(300); $('#nav').html('CATEGORIES').removeClass('back'); }); 

Answer 3

你应该在html5中做什么，使用没有href属性的锚标记。 在CSS中，您可以使用cursor: pointer来补偿它。 然后在JavaScript中突然不再需要event.preventdefault

Answer 4

一个hacky解决方案是在锚标记上设置href="#/" ，这将起作用。 但是，在不需要它们的情况下使用锚标签（如果你使用那么应该存在一些可点击链接）对于SEO来说不是一个好习惯。

此外，您可以使用e.preventDefault() ，但在所有函数上使用它，而不仅仅是在后退单击上。

但是，更好的做法是使用 ，消除那些跳跃问题并做更好的SEO。