如何停止重复单击以在jQuery中发布Ajax

Question

I use django create a website .and i just write a vote page ,when people click ,it will post data via jquery ajax .it work well here is the code 我使用django创建了一个网站。我只写了一个投票页，当人们点击时，它将通过jquery ajax发布数据。

<!doctype html>
<html>
 <head>
  <script src="jquery-1.10.2.min.js"></script> 
  <meta charset="utf-8">
  <title>vote</title>
 </head>
<body>
 <script language="javascript" type="text/javascript">
 $(function(){
    $(".post_up").click(function(){
        $.ajax({
            url:"/article/{{post.id}}/vote_up/",
            type:'post',              
            success:function(msg){
                var beforevote = $(".btn").text();                 
                if (msg==0){
                    $(".pop_up_vote").empty().text("thanks,i get your vote!").show(300).delay(7000).hide(300);
                      };
                      if (msg==1){
                    $(".pop_up_vote").empty().text("you already voted,do not need vote again").show(300).delay(7000).hide(300);
                };
         })

 })
 </script>

 <a href="javascript:" class="btn_gray_light post_up"><span><i class="icon_add"></i>vote</span></a> 
 <div class ="pop_up_vote" >
 </div>


</body>
</html>

Everything works well, and I just found the problem. 一切正常，我才发现问题所在。 I can not stop repeatedly click vote. 我无法停止反复单击投票。 If I click repeatedly <a href="javascript:" class="btn_gray_light post_up">vote</a> 如果我重复单击<a href="javascript:" class="btn_gray_light post_up">vote</a>

it repeate show up the pop_up message,"i already voted ,do not vote again." 它重复显示pop_up消息，“我已经投票了，不要再投票了。” so i thought ,i may solve the problem by remove the class post_up ,in this way ,people can not activate ajax post function so i add $(this).removeClass(); 所以我认为，我可以通过删除类post_up来解决问题，这样，人们无法激活ajax post函数，因此我添加了$（this）.removeClass（）;

  $(function(){

    $(".post_up").click(function(){
        $(this).removeClass();
        $.ajax({
            url:"/article/{{post.id}}/vote_up/",
            type:'post',              
            success:function(msg){
                var beforevote = $(".btn").text();                 
                if (msg==0){
                    $(".pop_up_vote").empty().text("thanks,i get your vote!").show(300).delay(7000).hide(300);
                      };
                      if (msg==1){
                    $(".pop_up_vote").empty().text("you already voted,do not need vote again").show(300).delay(7000).hide(300);
                };
        })

})

When I remove the class, I still have the problem regarding ajax. 当我删除该类时，我仍然遇到有关ajax的问题。 How could I fix it? 我该如何解决？

Answer 1

Try this : http://api.jquery.com/one/ . 试试这个： http : //api.jquery.com/one/ 。

$('.post_up').one('click', function () {

You can re-bind the same handler once Ajax is done : Ajax完成后，您可以重新绑定相同的处理程序：

$('.post_up').one('click', function handler() {
    var el = this;
    $.ajax({
        url: '/article/{{post.id}}/vote_up/',
        type: 'post',  
        success: function (msg) {
            $(el).one('click', handler);

Here is a demo : http://jsfiddle.net/wared/CVm37/ . 这是一个演示： http : //jsfiddle.net/wared/CVm37/ 。

Answer 2

I think the problem is that the behaviour is already set for the link, so removing the class won't do anything 我认为问题在于链接的行为已经设置，因此删除该类不会执行任何操作

try this instead 试试这个代替

$(".post_up").unbind("click");

如何停止重复单击以在jQuery中发布Ajax

问题描述

2 个解决方案

解决方案1
2 已采纳 2014-02-27 19:08:26

解决方案2
1 2014-02-27 19:09:18

如何停止重复单击以在jQuery中发布Ajax

问题描述

2 个解决方案

解决方案1 2 已采纳 2014-02-27 19:08:26

解决方案2 1 2014-02-27 19:09:18

解决方案1
2 已采纳 2014-02-27 19:08:26

解决方案2
1 2014-02-27 19:09:18