Грешка: „този“ обект е неправилен; В събитие за щракване в JQuery - Неочаквано поведение при щракване

Опитвам се да добавя бутон „Отказ“ към някакъв съществуващ HTML и jQuery код, който има някои ajax извиквания. Имам работещ бутон „Отказ“, но той спря част от поведението на моя бутон „Редактиране“. Изглежда не мога да разбера защо събитието за кликване на jQuery не работи. Във Firefox получавам:

Игнориране на get или набор от свойства, които имат [LenientThis], тъй като обектът „this“ е неправилен.

РЕДАКТИРАНЕ: Наясно съм, че горната грешка е специфична за Firefox Dev, която вероятно не е свързана с моя код.

Въпреки това не виждам проблем с използването на this или функцията, която трябва да бъде извикана, когато се щракне върху бутона „Редактиране“. Всъщност имам същата функция за щракване „Редактиране“, работеща върху друг модул на същата страница.

Ето моя jQuery:

$('#edit_stuff').click(function(){
        if($(this).html() == 'Edit') {
            $('#stuff .data').each(function () {
                var contents = $(this).html();
                var input = document.createElement('input');
                $(input).addClass('form-control');
                input.value = contents;
                // $(input).val(contents);
                $(this).html('');
                $(this).append(input);
                flag = true;
            });

            // Show Cancel button and 'Save' button when 'Edit' is clicked
            $('#cancel_stuff').show();
            $(this).html('Save');
        }
        else{
            var list = [];
            $('.info_display div.stuff_holder div.data_container').each(function(){
                flag = true;
                console.log(this);
                var inputs = $(this).children('div').children('input');
                console.log(inputs);
                var history = {
                    'title': inputs[0].value,
                    'description': inputs[1].value
                };
                list.push(history);
            });

            $.ajax({
                url: '../save_data',
                data: {honors: JSON.stringify(list)},
                success: function(data){
                    $('#stuff div.data').each(function () {
                        var contents = $(this).children('input')[0];
                        var val = contents.value;
                        $(this).html(val);
                    });

                    // Fill the DIV with ID stuff_holder with the new data and save in stuffData
                    $('#stuff_holder').data('stuffData', $('#stuff_holder').html());
                    // Hide the Cancel button and show 'Edit' when form has been saved
                    $('#cancel_stuff').hide();
                    $('#edit_stuff').html('Edit');
                    // Do not display X after 'Save' has been clicked
                    flag = false;
                },
                error: function(){
                    alert("Failed to save your stuff.  Please contact the system administrator.");
                }
            });
        }
    });

Сега имам много повече персонализирани jQuery функции, но това е тази, с която имам проблем. Мога да публикувам още, ако това не помогне. Моята функция за бутона „Отказ“ е отделна, която основно клонира HTML, преди да щракнете върху „Редактиране“, и след това замества HTML, ако потребителят натисне „Отказ“. Ако смятате, че трябва да публикувам и тази функция, уведомете ме.

HTML за това:

<div class="panel-heading">
    {% if request.user == some.user %}
    <span class="edit_info" id="edit_stuff">Edit</span>
    <!-- Added Cancel button -->
    <span class="cancel_edit" id="cancel_stuff">Cancel</span>
    {% endif %}
    <div class="panel-title">STUFF</div>
    <hr class="info-card" />
</div>
<div class="panel-body" id="stuff">
    <div class="stuff_holder" id="stuff_holder">
        {% for stuff in some.stuff.all %}
            <div class="data_container">
                {% if request.user == some.user %}<i class="fa fa-remove" style="display: none; color: red; position: relative; top: 0px; float: right; cursor: pointer;" id="stuff_{{ stuff.id }}"></i>{% endif %}
                <div class="stuff-title data">{{ stuff.stuff }}</div>
                <div class="stuff-description data">{{ stuff.description }}</div>
                {% if not forloop.last %}

                {% endif %}
            </div>
        {%  endfor %}
    </div>
    {% if request.user == some.user %}
        <button class="btn btn-success" style="float: right;" id="add_stuff"><i class="fa fa-plus"></i></button>
    {% endif %}
</div>

Почти един модул се показва с бутон „Редактиране“ (бутонът „Отказ“ е скрит). Когато щракнете върху „Редактиране“, се предполага, че се инжектират две полета за въвеждане, едно за заглавие, едно за описание, в модула. Бутонът „Редактиране“ се заменя със „Запазване“ и бутонът „Отказ“ става видим. Всичко работи с изключение на инжектирането на двете полета за въвеждане, когато щракнете върху „Редактиране“. Това трябва да се случи в първата част на функцията за събитие .click. Опитах се да променя this на #edit_stuff, без разлика.

Аз съм доста нов в използването на програми за отстраняване на грешки в JavaScript, като този във Firefox, така че наистина не стигам доникъде. Така че, ако нечие предложение включва как мога да отстраня грешките си сам, това би било чудесно. Както можете да видите, това е част от уеб проект на Python и jQuery не е моят силен език. Благодаря предварително!

РЕДАКТИРАНЕ: Имам чувството, че някои от другите ми jQuery функции се забъркват с тази функция .click(), която имам за #edit_stuff ID. Не искам да публикувам целия си код точно сега, така че ако го разбера, преди някой да може да ме насочи към това, което пропускам, тогава ще го публикувам тук.