Question

Its hard to explain this so I’ll try my best.

Is it possible to use .remove() to remove a javascript function from being repeated?

function

function readytouseCard() {
    console.log(this);
    $('.cardCVV input[name=cvv1]').keyup(function () {
        console.log("s");
        var checkCVV = $('.cardCVV input[name=cvv1]').filter(function () {
            return $.trim(this.value).length < 3;
        }).length === 0;
        if (checkCVV) {
            $("li.checkCode").addClass("checked");
        } else {
            $("li.checkCode").removeClass("checked");
        }
        checklistCheck();
    });

    function checklistCheck() {
        var counting = $("li.checked:not(.title)").length;
        if (counting == 6) {
            console.log(counting);
            $("input[name=purchase]").attr("disabled", false);
            $("input[name=purchase]").removeClass("purchase-btn-disabled");
            $("input[name=purchase]").addClass("purchase-btn");

        } else {
            $("input[name=purchase]").attr("disabled", true);
            $("input[name=purchase]").removeClass("purchase-btn");
            $("input[name=purchase]").addClass("purchase-btn-disabled");
        }
    }
}

The Main

$("li#usercurrentcc").click(function (e) {
    e.preventDefault();
    var selectedID = $(this).attr("data-id");
    var qString = 'selectedID=' + selectedID;
    $.post('/assets/inc/get-logged-info-card.php', qString, function (results) {
        if ($("#usercurrentccbox, #addnewccbox").length != 0) {
            $("#usercurrentccbox, #addnewccbox").fadeOut("fast", function () {
                $(this).remove();
                $("<div class='creditCardDetails' id='usercurrentccbox'><div class='creditCard'><div class='cardChoice'><span>Choose Card Type</span><input name='cctype1' type='radio' value='V' class='lft-field' id='visa' /><label for='visa'></label><input name='cctype1' type='radio' value='M' class='lft-field' id='mastercard' /><label for='mastercard'></label><input name='cctype1' type='radio' value='A' class='lft-field' id='amex' /><label for='amex'></label></div><!--cardChoice--><div class='cardNumber'><input name='ccn1' id='ccn' type='text' class='long-field' value='" + results[0].maskccn + "' maxlength='19' readonly /></div><div class='cardCVV'><input name='cvv1' id='cvv' type='text' maxlength='5' class='small-field' /></div><div class='creditCardName'><input name='ccname1' id='ccname' type='text' class='long-field' value='" + results[0].ccname + "' readonly/></div><div class='cardDate'><input name='exp11' id='exp1' type='text' maxlength='2' class='small-field' value='" + results[0].ccm + "' readonly /><input name='exp21' id='exp2' type='text' maxlength='4' class='small-field' value='" + results[0].ccy + "' readonly /></div></div><!--creditCard-->").insertAfter("#paymentCardChoice");
                $('#usercurrentccbox .cardChoice input#' + results[0].cct + '').attr("checked", true);
                $('#usercurrentccbox .cardChoice label').removeClass("active");
                $('#usercurrentccbox .cardChoice label[for="' + results[0].cct + '"]').addClass("active");
                $("li:not(.title,.checkCode)").addClass("checked");
            });
            readytouseCard();
        } else {
            $(".submit-btn").fadeIn();
            $("<div class='creditCardDetails' id='usercurrentccbox'><div class='creditCard'><div class='cardChoice'><span>Choose Card Type</span><input name='cctype1' type='radio' value='V' class='lft-field' id='visa' /><label for='visa'></label><input name='cctype1' type='radio' value='M' class='lft-field' id='mastercard' /><label for='mastercard'></label><input name='cctype1' type='radio' value='A' class='lft-field' id='amex' /><label for='amex'></label></div><!--cardChoice--><div class='cardNumber'><input name='ccn1' id='ccn' type='text' class='long-field' value='" + results[0].maskccn + "' maxlength='19' readonly /></div><div class='cardCVV'><input name='cvv1' id='cvv' type='text' maxlength='5' class='small-field' /></div><div class='creditCardName'><input name='ccname1' id='ccname' type='text' class='long-field' value='" + results[0].ccname + "' readonly/></div><div class='cardDate'><input name='exp11' id='exp1' type='text' maxlength='2' class='small-field' value='" + results[0].ccm + "' readonly /><input name='exp21' id='exp2' type='text' maxlength='4' class='small-field' value='" + results[0].ccy + "' readonly /></div></div><!--creditCard-->").insertAfter("#paymentCardChoice");
            $('#usercurrentccbox .cardChoice input#' + results[0].cct + '').attr("checked", true);
            $('#usercurrentccbox .cardChoice label').removeClass("active");
            $('#usercurrentccbox .cardChoice label[for="' + results[0].cct + '"]').addClass("active");
            $("li:not(.title,.checkCode)").addClass("checked");
        }
        readytouseCard();
    }, "json");
});
readytouseCard();

The function starts and works on the first click but after that it doesn’t work again. console log just shows Window # and when I click again it show Window # Window #

So I was hoping there was a way to kill the function readytouseCard() using .remove();

Thanks in advance

Answer 1

You can’t “remove” functions, you can just override them, e.g. readytouseCards = function(){}.

However I don’t understand, why you want to to that. And Console logging Window is correct, because you have console.log(this); on the first line of your function. Since you call readytouseCards from global context, this is bound to window.

Your actual problem is that you attach an eventhandler inside your readytouseCards(). Thus calling the function the second time attaches the eventhandler twice. This results in checklistCheck() being called twice on every keyup. This is indicated by your console logging window twice.

You need to refactor your whole code:

Attach the eventhandler ONCE in the beginning via .on() (jQuery on()) so that elements added to the dom later on have the eventhandler attached too.

$(document).on('keyup', '.cardCVV input[name=cvv1]', function () { ... }

and kill the function readytouseCard() by moving the checklistCheck() out of it. Finally, omit the readytouseCard(); calls.