如果在上一次点击后点击提交按钮太快,我的jquery保护就会中断

时间:2011-08-19 19:02:12

标签: jquery html

我有一个调查型“表格”。用户对更改进行了投票,但输入保持不变。在他们按提交之后,除了其他事项之外,用户要投票的新事物将被加载。如果以低频率按下提交按钮,我的程序运行正常。但是,如果压得太快,我的程序会中断。我很困惑为什么会这样,因为我在代码中的特定时间使用了启用/禁用按钮。

以下是我的HTML摘录:

<button id='submit-vote' disabled='disabled'>Submit</button>
<element class='change'><INPUT id='hidden_id' TYPE='hidden' name='id' value='<?php echo $id; ?>'/></element>

这是来自我的jquery的脚本(我不知道这是否重要,但这些都写在</body></HTML>标签之间,而不是<head></head>之间 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#submit-vote").attr("disabled", false).data('disabled', false); }); function loadListing() { var id = $('input:hidden[name=id]').val(); $.get("controller.php",{/* [relevant values]*/}, function(data) { if(data.response == 'success') { //some code var newId = $("<INPUT id='hidden_id' TYPE='hidden' name='id' value='"+data.id+"'/>"); $('#hidden_id').replaceWith(newId); return true; } else { //some code return false; } }, "json"); } jQuery(function($){ $("#submit-vote").click( function(){ if($(this).data('disabled') !== false ) { return; } else { $(this).attr('disabled', true).data('disabled', true); $.post('controller.php', {/*[relevant values]*/} , function(data) { if(data.response == 'success') { //code loadListing(); $('#submit-vote').attr('disabled', false).data('disabled',false); return true; } else { //code $('#submit-vote').attr('disabled', false).data('disabled',false) return false; } }, "json"); } } ); }); </script> 代码。):

if(!isset($_POST['poll']) && !isset($_GET['newListing'])) //UPON PAGE LOAD
{
    $activities = Activity::newActivitiesArrays($user_id);
    $_SESSION['activities'] = $activities;
    //more relevant code
    include('view.php');
}
if(isset($_POST['poll']) && !isset($_GET['newListing'])) //submitting vote
{   
    //relevant code using posted values
    $res = Activity::vote($user_id, $id, $vote);
    if( !$res )
    {
        echo json_encode(array("response"=>"fail"));
    }
    else
    {
        echo json_encode( array("response"=>"success"));
    }
}
if(isset($_GET['newListing']) && isset($_GET['id'])) //getting something different to display
{
    $id = $_GET['id'];
    $activities = $_SESSION['activities'];
    list($acts, $links, $ids) = $activities;
    $keys = array_keys($ids, $id);
    $key=$keys[0];
    if(!$key)
    {
        echo json_encode( array("response"=>"failure"));
    }
    else
    {
        //relevant code
        unset($_SESSION['activities']);
        $_SESSION['activities'] = $activities;
        echo json_encode( array("response"=>"success"));
    }
}

编辑 :(我已经更新了我的jquery以包含来自这个问题的第一个答案的代码,而且我还包含了一些我的html)。

这是我的'controller.php'摘录。我已经编辑了很多东西,只是为了包含重要的东西。重要的是要知道所有这些通常都能正常工作,除非非常经常点击提交按钮点击。:

{{1}}

任何帮助/建议表示赞赏。

2 个答案:

答案 0 :(得分:2)

属性为disabled="disabled"的按钮仍会触发点击事件。您需要分配一个变量,以便脚本知道它已被禁用。我建议使用data()

        $(function(){
             //The button should be enabled only as soon as the page is ready.
            $("#submit-vote").attr("disabled", false).data("disabled", false);

            $("#submit-vote").click( 
                function(){ 
                    if($(this).data('disabled') !== false)
                    {
                        return;
                    }
                    else
                    {
                        $(this).attr('disabled', true).data('disabled',true); //disable the button

                        $.post('controller.php', {/* [RELAVANT VALUES] */ } , 
                        function(data)
                        {
                            if(data.response == 'success')
                            {
                                //some code
                                $('#submit-vote').attr('disabled', false).data('disabled',false); //enable button
                                return true;
                            }
                            else
                            { 
                                //some code
                                $('#submit-vote').attr('disabled', false).data('disabled',false); //enable button
                                return false; 
                            } 
                        }, "json"); 
                    }
                }
            );
        });

文档:http://api.jquery.com/data/

答案 1 :(得分:0)

基本上你正处于某种竞争状态..请阅读这篇文章,了解更多deatails,以实现JS http://www.developer.com/lang/jscript/article.php/3592016

中的互斥