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

Не имейте двух отдельных обработчиков щелчков, объедините их в один:

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