如何在单选按钮上单击时将单击事件绑定一次？

Question

我有2个html单选按钮，如下：

<div class='radio'>
    <label><input type='radio' name='delivery_option' id='pickup'><strong>PICKUP</strong></label>
</div>
<div class='radio'>
    <label><input type='radio' name='delivery_option' id='delivery'><strong>DELIVERY</strong></label>
</div>
<div>
    <tr>
        <td id="total">$30</td>
    </tr> 
</div>

现在我在选中 DELIVERY 选项时添加2，在选择 PICKUP 选项时扣除2。

现在发生了什么：

例如：

总价30美元

我选择交付，所以现在总计：32美元 我选择PICKUP，所以现在总计：30美元

...再次

我选择交付，所以现在总计：32美元 我选择PICKUP，所以现在总计：30美元

但是在这个阶段......如果我再次点击PICKUP它会从30美元中减去2，所以总共28美元我不想要。它应该是剩余30美元我知道这是因为我的点击事件。

有没有什么方法可以在单选按钮上单击时将click事件绑定一次？

jQuery代码：

$("#pickup").bind('click', function() {
        $("#delivery_result2_address").show();
        $("#delivery_result2").hide();
        $("#delivery_charge").hide();       
        var total = parseInt( $("#total").text().replace(/[^0-9.]/g, ""));        
        var total =  total - 2;        
        $("#total").text("$"+total);
    });

    $("#delivery").bind('click', function() {
        $("#delivery_charge").show();
        var total = parseInt( $("#total").text().replace(/[^0-9.]/g, ""));
        var total =  total + 2;        
        $("#total").text("$"+total);
        $("#delivery_result2").show();
        $("#delivery_result2_address").hide();    
    });