Ошибка: «этот» объект неверен; В событии клика JQuery - неожиданное поведение при клике

Я пытался добавить кнопку «Отмена» в некоторый существующий код HTML и jQuery, который имеет некоторые вызовы ajax. У меня работает кнопка «Отмена», однако она остановила некоторые действия моей кнопки «Редактировать». Кажется, я не могу понять, почему событие клика jQuery не работает. В Firefox я получаю:

Игнорирование получения или набора свойства с [LenientThis], поскольку объект «этот» неверен.

РЕДАКТИРОВАТЬ: я знаю, что вышеуказанная ошибка является конкретной ошибкой 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. Я не хочу публиковать весь свой код прямо сейчас, поэтому, если я выясню это до того, как кто-то, надеюсь, сможет указать мне, что мне не хватает, я опубликую его здесь.