how to reset .one() without refreshing page

Question

i have a submit button that i attached a .one() mouse event to, cos otherwise if you accidentally double click it will send the information twice.

the only problem is that once the information is sent, i refresh the containing div (i don't what the whole page to refresh) which then displays the new information. But if you go to add more information it won't allow you to click the submit button again as its already been clicked.

i thought as im refreshing the div that it would reset....but it doesnt. how do i fix this?

thanx

edit

so with the help of JOE ive done this. but it still fires twice on double click. have i done this right?

    var clickActive = false;
$("body").on("click", '.post_comment_button', function(e){
        e.preventDefault();
        if(clickActive) return;
        else { 
        clickActive = true;
        var post = $(this).parents('.update_comment').parents('#post_comment');
        var anchor = $(post).siblings('.comment_list').find('ul:first');
        var comment = $(this).parents('.update_comment').children('textarea.post_comment').val();
        var user = $(this).parents('.update_comment').children('input.user').val();
        var msg_id = $(this).parents('.update_comment').children('input.message_id').val();
            if (comment == '')  loadComments();     
            else {
                $.post('messages.php', { 
                    comment: comment, 
                    message_id: msg_id, 
                    post_comment: 'true' }, function(data) {
                    //create new comment//  
                        $('body').append(data);
                        var newcomment = "<li><div class='comment_container'><div class='date'>less than 1 minute ago</div><div class='name'>" + user + " </div><div class='info_bar'><div class='edit_comment'><a href='#' class='comment_edit'>Edit</a></div><span>|</span><a href='#' class='delete_comment'>Delete</a></div><div class='fadeOut_comment'><div class='posted_comment'> " + nl2br(htmlEntities(comment.trim())) + " </div></div></li>";
                        $(post).slideUp(400);
                        $(newcomment).fadeIn(500, function() {
                            loadComments();
                        }).appendTo(anchor);
                        clickActive = false;
                });
            }
        }
});

Answer 1

Another solution is to disable the button so that the user can't click it twice in a row. Adapt the following logic to your code.

//Bind a click event handler to your button
$("body").on("click", "you_button_selector", function(e)
{
    //Prevent any default behaviour, we're dealing with this ourselves
    e.preventDefault();
    //First, disable the button
    $("your_button_selector").attr("disabled", "disabled");
    //Then, make your ajax call
    $.ajax(
    {
        url: "http://example.com",
        success: function(data)
        {
            //When your ajax call returns, enable the button again
            $("your_button_selector").removeAttr("disabled");
        }
    });
});