removeClass not working inside a function

Question

I have an .on('click', function()) that is calling another function

$('.controls a[data-attr="editEmailAddress"]').on('click', function (e) {
    e.preventDefault();
    if ($(this).hasClass("btn-primary")) {
        updateEmailAddress();
    } else {
        hideSuccess();
    }
    $(this).addClass("btn-primary");
    $(this).find('i').addClass("icon-white icon-edit").addClass('icon-ok');
    $(this).siblings('input[type=text]').attr('disabled', false);
});

The function does some standard validation and if it is valid it's is supposed to remove the classes btn-primary among some other things.

function updateEmailAddress() {
    // Clear the error div of any previous errors
    $('#validationSummary').hide().empty();

    var isValid = true;

    // Must Enter Email Address
    var emailEntered = $('#txtEmailAddress').val();
    if (!$.trim(emailEntered).length) {
        $('#validationSummary').append('Email address required').fadeIn();
        isValid = false;
    }
    else {
        // If Email Entered verify that it is a valid email address
        if (!validateEmail(emailEntered)) {
            $('#validationSummary').append('Enter valid email address.').fadeIn();
            isValid = false;
        }
    }
    if (isValid) {
        // Change state of edit icon
        $('#lnkEditEmailAddress').removeClass("btn-primary");
        $('#lnkEditEmailAddress').find('i').addClass("icon-white icon-edit").addClass('icon-ok');
        $('#lnkEditEmailAddress').siblings('input[type=text]').removeAttr('disabled', true); }
}

Here is a working jsfiddle

Can someone identify what changes would need to be made to get the input/image back to it's original disabled state? Would this have something to do with the classes not being in the DOM when the page loads?

There is obviously a web-method that won't be found causing an error

Just a couple of things to note, but in jQuery 1.9 you should use .prop() instead of .attr() for the disabled property. Also, once that property is set and you remove it, I do not believe you can add it back. See this post: http://stackoverflow.com/questions/1414365/how-to-disable-an-input-with-jquery — CSharpConductor, Jul 15 '13 at 22:04

score 1 · Accepted Answer · answered Jul 15 '13 at 22:09

The problem is that your function isn't stopping once updateEmailAddress() completes running. Instead, it continues on and immediately re-adds btn-primary. Try this:

$('.controls a[data-attr="editEmailAddress"]').on('click', function (e) {
    e.preventDefault();
    if ($(this).hasClass("btn-primary")) {
        updateEmailAddress();
        return; // note this addition
    } else {
        hideSuccess();
    }
    $(this).addClass("btn-primary"); // if you don't return, this gets called right after .removeClass(...)
    $(this).find('i').addClass("icon-white icon-edit").addClass('icon-ok');
    $(this).siblings('input[type=text]').attr('disabled', false);
});

removeClass not working inside a function

1 Answers1