Question

我有一个包含多个链接的菜单（HTML标记）。

点击菜单条目添加“有效”类，该类可更改菜单条目外观＆amp;感觉。菜单条目具有data-remove="true"以便对链接进行Ajax化。

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

我的想法是说菜单条目是否具有“有效”类，然后阻止对服务器的调用，否则让它继续。

我对preventDefault，stopPropagation和return false进行了一些尝试......但它没有按预期工作。我得到的最好的是将preventDefault和stopPropagation组合在一起但是控制器再也没有调用了。

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

Answer 1

听起来你正在失去事件授权。由于该类被删除，事件也消失了。尝试使用dom树中关闭父级的选择器，该选择器不会丢失它的id或更改类。

示例

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

这会将点击委托给父容器。然后当删除“活动”类时，如果将其添加回事件，该事件仍然可以工作。

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

Answer 2

问题在于，首次点击第一个链接时点击一次点击，然后点击另一个链接点击两次，依此类推。

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

当jQuery-ujs正在使用data-remote=true（link_to and remote => true + jquery : How? Help?）处理.ajax时，我已经迷上了发送前的＆＃39;活动，在这里，我正在寻找之前的＆＃39;而不是活跃的＆＃39;类。

这是我的代码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;
  }
});

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

2 个答案: