我有一个星形按钮,用户可以点击该按钮为我网站上的某些内容加注星标。单击时,它会提交一个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'
答案 0 :(得分:0)
下一个代码阻止双击。
$document.on('click','#star-question-icon',function(ev){
if(ev.detail>1){
// this code execute after twice click or more
return false;
}
});