Before Unload keeps firing

Question

I'm having some trouble dealing with the before unload event, which, for some reason, keeps firing even when I explicitly tell it no to.

So, this is my HTML:

<div class="payment-details-account-top">
    <form id="payment-details-form-card" action="<?php echo Mage::getUrl('orderform/index/changedpayment'); ?>" method="POST">
        <div class="row all-steps">
            <div class="col-md-12">
                <input type="radio" name="payment-with-card" value="<?php echo $this->__('Betale med kort') ?>" id="payment-with-card" class="css-checkbox" <?php if ($ba->getMethodCode() == 'payex2'): ?> checked <?php endif; ?> onclick="this.form.submit();">
                <label for="payment-with-card" name="payment-with-card" class="css-radio-label"></label>
                <input type="submit" name="payment-with-card" id="payment-with-card" value="<?php echo $this->__('Betale med kort') ?>" class="top-payment-buttons" />
            </div>
        </div>
    </form>
</div>
<div class="payment-details-account-bottom">
    <div class="row all-steps">
        <div class="col-md-12">
            <input type="radio" name="payment-with-faktura" value="<?php echo $this->__('Betale med faktura') ?>" id="payment-with-faktura" class="css-checkbox" <?php if ($ba->getMethodCode() != 'payex2'): ?> checked <?php endif; ?> >
            <label for="payment-with-faktura" class="css-radio-label"></label>
            <input type="button" name="payment-with-faktura" id="payment-with-faktura" value="<?php echo $this->__('Betale med faktura') ?>" class="bottom-payment-buttons" />
            <form id="payment-details-form" action="<?php echo Mage::getUrl('orderform/index/changedpayment'); ?>" method="POST">
            </form>
        </div>
    </div>
</div>

In order to change the selected form, I use radio buttons along with labels to style those radios according to needs. So, here's my jQuery:

$('#payment-with-faktura').on('click', function(){
    $('#payment-with-card').removeAttr("checked");
    $('#payment-with-faktura').prop("checked", true);
    $(window).unbind("beforeunload");
});

$('#payment-with-card').on('click', function(){
    $('#payment-with-faktura').removeAttr("checked");
    $('#payment-with-card').prop("checked", true);
    $(window).unbind("beforeunload");
});

None of this seems to be working, so I went ahead and also added this

$('.css-radio-label').on('click', function () {
    $(window).unbind("beforeunload");
});

The result is still the same, whenever I change the selected radio and try, for example, to refresh the page, I'm getting the popup alerting that I'm leaving the page and asking if I wish to stay on the page or leave the page.

So, what am I doing wrong here?

Best Regards