2 stage button in jQuery

Question

I am new to jQuery so please don't judge me too harshly!

I'm making a page which lists videos, under each video there is a voting button. The button works in 2 stages, first you click it which expands the button, then the second click should confirm the vote using PHP/Ajax. If you click another button before submitting it should reset the first.

I put together the below to try and accomplish this, the first section is to expand the button, then the second is to submit the vote. It kind of works, but I noticed that if you click on one button, then another, then back to the first it submits the vote. Any ideas of how I can get this working? Or a better way of working?

Thanks in advance!

<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 have two seperate click handlers, combine them into one:

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