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

时间:2017-11-16 19:19:40

标签: javascript jquery ruby-on-rails ajax coffeescript

我有一个星形按钮,用户可以点击该按钮为我网站上的某些内容加注星标。单击时,它会提交一个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'

1 个答案:

答案 0 :(得分:0)

下一个代码阻止双击。

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