仅当链接没有活动类时才允许链接调用服务器答案

【问题标题】：Allow link to call the server only when it doesn't have the active class仅当链接没有活动类时才允许链接调用服务器
【发布时间】：2015-01-13 21:41:01
【问题描述】：

我有一个带有多个链接的菜单（一个 HTML 标签）。

单击一个菜单条目会添加“活动”类，它会改变菜单条目的外观和感觉。菜单条目有 data-remove="true" 以便 Ajaxify 链接。

我想要做的是防止当用户点击2次相同的链接时调用服务器。

我的想法是，如果菜单项具有“活动”类，则阻止对服务器的调用，否则就让它过去。

我对@987654323@、stopPropagation 和return false 进行了一些尝试……但它没有按预期工作。我得到的最好的结果是结合 preventDefault 和 stopPropagation 但控制器再也没有调用过。

如何避免在单击具有“活动”CSS 类的链接时调用控制器？

【问题讨论】：

我认为逻辑最适合实际执行 ajax 获取的函数，只需在 ajax 函数前面加上 if ( !$(this).hasClass('active') ) {...。
提供你目前掌握的标记和js
@adeneo 没有 Javascript 函数（我提到的是我试图编写的一个函数来阻止 ajax 调用）。多亏了 Rails 框架，将data-remove="true" 添加到链接中是很神奇的。（我注意到我忘记了 Rails 标签）
注意：提供此功能的不是 Rails 框架，而是 jQuery-ujs (github.com/rails/jquery-ujs/wiki/ajax)
好吧，preventDefault 会阻止默认行为，它不会阻止 javascript 添加的其他事件处理程序，这通常是您无法做到的，或者至少不容易做到。

标签： jquery ajax

【解决方案1】：

听起来您正在失去事件委托。由于类被删除，事件也消失了。尝试在 dom 树中使用 closes 父级的选择器，该选择器不会丢失其 id 或更改类。

例子

$("#wrapper").on("click", ".active", function(e){
    e.preventDefault();
    e.stopPropagation();
    //other code you wanted handled.
});

这会将点击委托给父容器。那么当“活动”类被移除时，如果添加回来，事件仍然可以工作。

仔细阅读本文http://api.jquery.com/on/

【讨论】：

但我认为我不能这样做，因为我需要用户单击管理类的 a 标签。如果我将事件委托给父级，则链接不会被执行，对吗？（好吧，我想 Javascript 还是可以的）
这是不正确的。当您委托事件时，该事件被委托给父级，但它会在类上触发。
如果您同意我的回答，请您将其标记为正确。泰。
好吧，因为我没有尝试过，我无法确认它是否有效。 :(

【解决方案2】：

问题在于，第一次点击第一个链接时会触发一次点击，然后点击另一个链接会触发 2 次，依此类推。

我已修复它在事件上添加一个布尔值，以便只执行一次我的代码。有了这个，我已经实现了一个'previous'类，它显示了上一个菜单项被点击了。

由于 jQuery-ujs 正在使用 .ajax (link_to and remote => true + jquery : How? Help?) 处理 data-remote=true，我已经迷上了 'beforeSend' 事件，在这里我正在寻找 'previous' 类而不是 'active'类。

这是我的代码 Javascript 代码：

$('a.list-group-item').bind('ajax:beforeSend', function(jqXHR, settings) {
  if ($(jqXHR.target).hasClass('previous'))
    return false;
});

$('a.list-group-item').on('click', function() {
  if (event.handled !== true)
  {
    $('a.list-group-item.previous').removeClass('previous');
    $('a.list-group-item.active').addClass('previous').removeClass('active');
    $(this).addClass('active');
    event.handled = true;
  }
});

【讨论】：