Question

很难解释这一点，所以我会尽我所能。

是否可以使用.remove（）删除重复的javascript函数？

功能

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");
        }
    }
}

主要

$("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();

该功能在第一次点击时启动并运行，但在此之后它不再起作用。控制台日志只显示 Window＃，当我再次点击它时会显示 Window＃Window＃

所以我希望有一种方法可以使用.remove（）来杀死函数readytouseCard（）;

提前致谢

Answer 1

它是全局的，这意味着我们可以通过窗口访问它。

window.readytouseCard() = function(){
  return false;
}

现在我们已经完成了这项工作，功能内容已被return false;取代，模仿nothing happening。

Answer 2

您无法“删除”功能，您可以覆盖它们，例如readytouseCards = function(){}。

但是我不明白，为什么你要这样做。并且控制台日志记录Window是正确的，因为您在函数的第一行有console.log(this);。由于您从全局上下文中调用readytouseCards，因此this绑定到window。

您的实际问题是您在 readytouseCards()中附加了一个事件处理程序。因此，第二次调用函数会将事件处理程序连接两次。这导致在每个keyup上调用checklistCheck()两次。这是由您的控制台记录window两次。

您需要重构整个代码：

通过.on()（jQuery on()）在开头附加事件处理程序ONCE，以便稍后添加到dom的元素也附加了事件处理程序。

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

并通过移动readytouseCard()来删除函数checklistCheck()。最后，省略readytouseCard();次来电。

Answer 3

我已经重新缩进了你的代码。正如您现在所看到的，当在Ajax请求之后找到#usercurrentccbox, #addnewccbox时，该函数将被调用两次。只需删除第一个。

如果要在执行一次后自动删除事件侦听器，jQuery会提供.one()。

您无法删除某项功能。如果函数在每次调用时由标识符确定，则可以使用不同的函数覆盖该变量。但是，当对函数的引用存储在不可访问的变量中时，例如，这将不起作用。当作为事件监听器添加时。然后你需要编码：

var called = false;
function executeOnlyOnce(...) {
    if (called) return;
    called = true;
    ...
}

删除函数不被重复

3 个答案: