Php jQuery中的2阶段按钮

我是jQuery的新手，所以请不要对我太苛刻

我正在制作一个页面，其中列出了视频，每个视频下都有一个投票按钮。该按钮分两个阶段工作，首先单击它以展开按钮，然后第二次单击应使用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>  

---

不要有两个单独的单击处理程序，请将它们合并为一个：

$(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");
    }    
});

---

这很有魅力。我真是太感谢你了！“我没有足够的声誉，所以我不能把答案标记为有用的。@马特：没问题，很高兴我能帮上忙。任何你应该能够标记这个答案为正确的勾号。有15分钟的延迟，但现在已经过去了。啊，是的，我现在明白了。对于任何觉得这有帮助的人来说，这个按钮需要在第二阶段双击，因为$ul li.active-button.clickfunction，我删除了它，它工作得非常完美！