JQUERY: When I remove a attr, I can't add the attr again

Question

This is my code:

$("input[name=donationmode]").change(function() {
    $(".setpaymentOptions").children().addClass("fadeout");
    $(".setpaymentOptions").children().children(".inputfield").children("input").attr("disabled", "disabled");

    $(".option-"+$(this).val()).removeClass("fadeout");
    $(".option-"+$(this).val()).children(".inputfield").children("input").removeAttr("disabled");

    if($(this).val() == 2)
    {
        $(".option-2").children(".inputfield").children("#paymentOption").find("input").removeAttr("disabled");
        $(".option-2").find(".addPaymentOption").attr("onclick", "addPaymentOption()");

    }
    else
    {
        $(".option-2").children(".inputfield").children("#paymentOption").find("input").attr("disabled", "disabled");
        $(".option-2").find(".addPaymentOption").removeAttr("onclick");
    }
});

When I change the input (it's a radio button group of 3 radio buttons) to 2, it will add the onclick to the .addPaymentOption. Then I will change the input to 3 and the onclick disappears. That's good.

Now the tricky part, when I click back on the the with value 2 the onclick doesn't come back.

Please help me, where is the bug?

Answer 1

You don't want to add an onclick attribute, you want to add a click handler (and remove it using unbind).

   $('.option-2').find('.addPaymentOption').click( addPaymentOption );

   $('.option-2').find('.addPaymentOption').unbind( 'click', addPaymentOption );