错误："此"对象不正确;在 JQuery 单击事件中 - 单击时出现意外行为

Question

我一直试图在一些现有的HTML和jQuery代码中添加一个"取消"按钮，这些代码有一些ajax调用。我有"取消"按钮工作，但它停止了我的"编辑"按钮的一些行为。我似乎不明白为什么jQuery点击事件不起作用。在Firefox中，我得到了：

忽略具有[LinentThis]的属性的get或set，因为"this"对象不正确。

编辑：我知道上面的错误是一个特定于Firefox开发人员的错误，可能与我的代码无关。

但是，我认为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 web项目的一部分，jQuery不是我的强项语言。提前感谢！

EDIT：我有一种感觉，我的其他一些jQuery函数正在处理这个问题。我有#EDIT_stuff ID的click function（）。我现在不想发布我所有的代码，所以如果我在任何人希望引导我找到我缺少的东西之前就弄清楚了，那么我会在这里发布它。

Answer 1

好吧，这可能真的很傻，但我解决了自己的问题，但并不是我想象的那样。我在python模板HTML文件中有内联JavaScript，我一直在使用PyCharm。由于这是我第一次在PyCharm中实现jQuery，我没有意识到PyCharm用来注释Django代码的自动引号在模板文件中，尤其是在脚本标记中。因此，由于信任PyCharm的注释热键，我在整个模板文件中都有{# #}引号标记，这使我的jQuery代码无法运行。实际上，PyCharm应该能够识别出它是jQuery代码，并在高亮显示并单击CTRL+/时使用适当的注释块（对于JavaScript，为//或/* */）。

再说一遍。这是我的错。以下是我完成的代码（以防有人想知道）：

$('#edit_stuff').click(function(){
        // Check to see if the user has any stuff already added
        if ($(this).html() == 'Edit') {
            // Check for flag to activate .mouseenter and .mouseleave events
            $('.data_container').mouseenter(function () {
                if(flag)
                    $(this).children('i').css('display', 'block');
            });
            $('.data_container').mouseleave(function () {
                if(flag)
                    $(this).children('i').css('display', 'none');
            });
            $('.fa-remove').click(function () {
                $(this).parent().remove();
            });
            // Set flag to allow stuff removal
            flag = true;
            // If the user does not have any stuff added, launch #add_stuff .click function
            if($('#stuff_holder').find('div.data_container').length == 0) {
                $(this).html('Save');
                // Show Cancel button and 'Save' button when 'Edit' is clicked
                $('#cancel_stuff').show();
                $('#add_stuff').click();
            } else {
                $('#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);
                });
                $(this).html('Save');
                // Show Cancel button and 'Save' button when 'Edit' is clicked
                $('#cancel_stuff').show();
            }
        } else {
            var stuff_list = [];
            $('.user_info_display div.stuff_holder div.data_container').each(function(){
                console.log(this);
                var inputs = $(this).children('div').children('input');
                console.log(inputs);
                var history = {
                    'title': inputs[0].value,
                    'description': inputs[1].value
                };
                stuff_list.push(history);
            });
            $.ajax({
                url: '../save_user_data',
                data: {stuff: JSON.stringify(stuff_list)},
                success: function(data){
                    $('#stuff div.data').each(function () {
                        var contents = $(this).children('input')[0];
                        var val = contents.value;
                        $(this).html(val);
                    });
                    // Set flag
                    flag = false;
                    $('#edit_stuff').html('Edit');
                    // Hide the Cancel button and show 'Edit' when form has been saved
                    $('#cancel_stuff').hide();
                    // Fill the DIV with ID stuff_holder with the new data and save in stuffData
                    $('#stuff_holder').data('stuffData', $('#stuff_holder').html());
                },
                error: function(){
                    alert("Failed to save your stuff.  Please contact the system administrator.");
                }
            });