如何避免在菜单下拉菜单中重新加载页面?HTML与JQUERY

How can I avoid to reload page in "menu dropdown" HTML with JQUERY

本文关键字：加载 JQUERY HTML 菜单 何避免 下拉菜单 新加载      更新时间：2023-09-26
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button" aria-expanded="true">
        <span class="visible-sm-inline visible-md-inline visible-lg-inline">Sort by</span>
        <span class="visible-xs-inline"><i class="fa fa-fw fa-sort"></i></span>
        <span class="caret"></span>
    </button>
<ul class="dropdown-menu pull-right">
        <li><a href="#" class="newest_to_oldest" data-sort="newest_to_oldest"><i class="fa fa-fw"></i> Newest to Oldest</a></li>
        <li><a href="#" class="oldest_to_newest" data-sort="oldest_to_newest"><i class="fa fa-fw"></i> Oldest to Newest</a></li>
        <li><a href="#" class="most_posts" data-sort="most_posts"><i class="fa fa-fw"></i> Most posts</a></li>
        <li><a href="#" class="zero" data-sort="zero"><i class="fa fa-fw"></i> Post senza risposta</a></li>
    <li><a href="#" class="most_views" data-sort="most_views"><i class="fa fa-fw fa-check"></i> Most Views</a></li></ul>

我需要检测当我点击this元素:

<li><a href="#" class="most_views" data-sort="most_views"><i class="fa fa-fw fa-check"></i> Most Views</a></li></ul>

问题是(我认为)，当我点击元素的页面被重新加载，所以我不能做我的操作，当我点击元素。我需要，当我点击元素，我可以做我的操作后重新加载页面，但我不知道它是否可能。我错误的jquery代码是:

$('a[data-sort]').click(function() {
  console.log("CLICK DAT SORT");
  if ($(this).is('[data-sort="most_views"]')) {
    // do my operation
  }
});

有人能帮我吗?

可以，您可以阻止默认行为(对于a元素，是打开链接)

$('a[data-sort]').click(function(e) {
  e.preventDefault()
  ...

.click函数将事件传递给处理程序，事件可以停止:https://api.jquery.com/event.preventdefault/

如果你不想跟随你的链接使用返回false;

它将修改浏览器的默认行为，你的页面将不会被重新加载。

$('a[data-sort]').click(function() {
     console.log("CLICK DAT SORT");
     if ($(this).is('[data-sort="most_views"]')) {
         // do my operation
         }
         return false;
});
相关文章：