Question

I am trying to debug this (incomplete) script, but it is behaving inconsistently. The main problem is when I click off of an item, sometimes the $(editObj).removeAttr('style'); runs and sometimes not. Through the Chrome inspector I can see that the editObj variable in each case is properly defined, but it isn’t always getting its inline style attribute removed. Sometimes, and sometimes not. Cannot determine the reason.

I’m a bit out of my element with this code. Maybe something about it is obvious; Regardless I’d appreciate some ideas on why this sort of unpredictable might be occuring!

    var editObj = null;
    var inputType = 'text';
    var input = '#textEdit';
    var formId = '#form_undefined'

$(function() {
$("#textEdit").click(function(event) {
        event.stopPropagation();
    });

    $('body').click(function(event) {
        if (editObj){


            //textedit contents to editobj and 
            if (inputType == 'text'){
                $(editObj).text($("#textEdit").val());
            }
            $("#textEdit").removeAttr('style').hide();

            $(editObj).removeAttr('style');
            var previewId = $(editObj).attr('id');
            var formId = previewId.replace('bzm', 'form');
            $("#" + formId).val($("#textEdit").val());

            //ajax modify database
            editObj = null;
        }
    });

    $(".editable").not("video, img, textarea")
    .click(function(event) {
        event.stopPropagation();
        loadEditor($(this));
    });
});

function loadEditor(element){

    $("#textEdit")
        .copyCSS(element)
        .offset($(element).offset())
        .css("display", "block")
        .val($(element).text())
        .select();

    $(element).css("color", "transparent");

    editObj = element;
}

Answer 1

I’ve had trouble in the past with .removeAttr('style'); not actually removing all the inline styles.

Use

$(editObj).attr('style', '');

instead of

$(editObj).removeAttr('style');