Question

I have a <span> button, which calls some jQuery, I need a way to then disable it (and if possible, it’s corresponding up/down button) from being repeatedly clicked. I have made event handlers for the buttons as such:

$('.RateDown').click(function() {

    //down counter
    var downValue = parseInt($(this).text());
    downValue--;
    $(this).text(downValue);

    //total counter
    var totalValueElement = $(this).prevAll('.RateTotal').first();
    var totalValue = parseInt(totalValueElement.text());
    totalValue--;
    totalValueElement.text(totalValue);
});

(And a similar one for RateUp)

And the relevant HTML as follows

<div class='RateBar'>
    <span class='RateTotal'>0</span><br />
    <span class='RateUp'> +0</span>
    <span class='RateDown'> -0</span>
</div>

This works for the moment, but anyone can repeatedly spam the button, so I was thinking that if I change it’s class to a “Rated” one, that it would not be click-able. I have tried using the .attr() feature, but this does not succeed. Is it possible to disable it in this way, or some other way? I have played around with a disabled boolean, changing it on click, but with multiple buttons on a page, this is impractical.

(The buttons are currently here)

Answer 1

Use jQuery .one on the click event – it binds only once. – http://api.jquery.com/one/