Кнопка 2 этапа в jQuery

Question

Я новичок в jQuery, поэтому, пожалуйста, не судите меня слишком жестко!

Я делаю страницу, на которой перечислены видео, под каждым видео есть кнопка для голосования. Кнопка работает в 2 этапа, сначала вы нажимаете на нее, которая расширяет кнопку, затем второй щелчок должен подтвердить голосование с помощью PHP/Ajax. Если вы нажмете другую кнопку перед отправкой, она должна сбросить первый.

Я собрал нижеследующее, чтобы попытаться выполнить это, первый раздел - это развернуть кнопку, затем вторая должна подать голосование. Это вроде работает, но я заметил, что если вы нажмете на одну кнопку, затем на другую, затем вернитесь к первому, он представит голосование. Любые идеи о том, как я могу это сделать? Или лучший способ работы?

Заранее благодарен!

<script> 
$(window).load(function(){ 
    $("ul li .button").click(function() { 
     $("ul li .button").removeClass("active-button");  
     $("ul li .button").text("Vote for this"); 
     $(this).addClass("active-button"); 
     $(this).text("Submit vote"); 
     stop; 
    }); 
}); 

$(document).on("click", "ul li .button", function() { 
    if ($(this).hasClass("active-button")) { 
     $("ul li .active-button").click(function() 
      { 
      var id = $(this).attr("id"); 
      var name = $(this).attr("name"); 
      var dataString = 'id='+ id ; 
      var parent = $(this); 

      if (name=='up') 
       { 
        $.ajax({ 
         type: "POST", 
         url: "up_vote.php", 
         data: dataString, 
         cache: false, 

         success: function(html) 
         { 
         parent.html(html); 
         } 
        }); 
       } 
     }); 
    } 
}); 
</script> 


<ul class="videos clearfix"> 
    <?php include('config.php'); 
     $sql=mysql_query("SELECT * FROM messages LIMIT 4"); 
     while($row=mysql_fetch_array($sql)) 
      { 
       $msg=$row['msg']; 
       $mes_id=$row['mes_id']; 
       $up=$row['up']; 
       $title=$row['title']; 
    ?> 

      <li> 
       <h2><?php echo $title; ?></h2> 
       <?php echo $msg; ?> 
       <div id="<?php echo $mes_id; ?>" name="up" class="button vote">Vote for this</div>  
      </li> 

    ?php } ?> 

</ul> 

Answer 1

Dont имеют два отдельных обработчиков кликов, объединить их в одно:

$(document).on("click", "ul li .button", function() { 
    if ($(this).hasClass("active-button")) { 
      var id = $(this).attr("id"); 
      var name = $(this).attr("name"); 
      var dataString = 'id='+ id ; 
      var parent = $(this); 

      if (name=='up') 
       { 
        $.ajax({ 
         type: "POST", 
         url: "up_vote.php", 
         data: dataString, 
         cache: false, 

         success: function(html) 
         { 
         parent.html(html); 
         } 
        }); 
       } 

    }else{ 
      $("ul li .button").removeClass("active-button");  
      $("ul li .button").text("Vote for this"); 
      $(this).addClass("active-button"); 
      $(this).text("Submit vote"); 
    }  
});