Question

我有一个星形按钮，用户可以点击该按钮为我网站上的某些内容加注星标。单击时，它会提交一个ajax请求，我的rails控制器将处理其余的请求。 ajax运行正常，我使用一些coffeescript和jQuery来点击它时更改星形图标。它运行正常，但如果我刷新页面，则单击会触发两次。我试过.preventDefault（）但它没有做任何事情。停止触发两次的有效原因是.stopImmediatePropagation（）。但是，这会将我的按钮从POST方法更改为GET，并且我收到路由错误，说明没有GET /...这样的路由。

这是我的按钮：

<%= link_to star_question_path(@question), method: :post, remote: true do %>
  <i class="fa fa-star fa-2x fa-yellow" id="star-question-icon"></i>
<% end %>

Coffeescript和jQuery：

$('#star-question-icon').on 'click', (e) ->
  if $(this).hasClass "fa-star"
    $(this).removeClass('fa-star')
    $(this).addClass('fa-star-o')
  else if $(this).hasClass "fa-star-o"
    $(this).removeClass('fa-star-o')
    $(this).addClass('fa-star')
  return

这可以正常工作，但如果刷新页面，则将方法更改为GET：

$('#star-question-icon').on 'click', (e) ->
  e.stopImmediatePropagation()
  if $(this).hasClass "fa-star"
    $(this).removeClass('fa-star')
    $(this).addClass('fa-star-o')
  else if $(this).hasClass "fa-star-o"
    $(this).removeClass('fa-star-o')
    $(this).addClass('fa-star')
  return

我的相应路线：

post 'question/:id/star', to: 'questions#star', as: 'star_question'

Answer 1

下一个代码阻止双击。

   $document.on('click','#star-question-icon',function(ev){
        if(ev.detail>1){
          // this code execute after twice click or more
          return false;
        }
      });

刷新页面使jQuery按钮单击触发器两次

1 个答案: