Error: 'this' object is incorrect; In JQuery click event - Unexpected Behavior on click
Error: 'this' object is incorrect; In JQuery click event - Unexpected Behavior on click
我一直在尝试将 'Cancel' 按钮添加到一些现有的 HTML 和 jQuery 代码中，这些代码有一些 ajax 调用。我有 'Cancel' 按钮工作，但是它停止了我的 'Edit' 按钮的一些行为。我似乎无法弄清楚为什么 jQuery 单击事件不起作用。在 Firefox 中我得到：
Ignoring get or set of property that has [LenientThis] because the "this" object is incorrect.
编辑：我知道上述错误是 Firefox Dev 特定的错误，可能与我的代码无关。
但是我没有发现我使用 this 或单击 'Edit' 按钮时应该调用的函数有问题。事实上，我在同一页面上的另一个模块上有相同的 'Edit' 单击功能。
这是我的 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 函数，但这是我遇到的问题。如果这没有帮助，我可以 post 更多。 'Cancel' 按钮的功能是单独的，它基本上是在您单击 'Edit' 之前克隆 HTML，然后在用户点击取消时替换 HTML。如果您认为我也需要 post 该功能，请告诉我。
本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>
几乎所有模块都带有 'Edit' 按钮（'Cancel' 按钮被隐藏）。当您单击 'Edit' 时，它应该向模块中注入两个输入框，一个用于标题，一个用于描述。 'Edit' 按钮被 'Save' 取代，并且 'Cancel' 按钮变为可见。单击 'Edit' 时，除了注入两个输入框外，一切正常。这应该发生在 .click 事件函数的第一部分。我尝试将 this 更改为 #edit_stuff，没有任何区别。
我对使用 JavaScript 调试器（例如 Firefox 中的调试器）还很陌生，所以我并没有真正取得进展。因此，如果有人的建议包括我如何自己调试它，那就太好了。如您所见，这是 python 网络项目的一部分，jQuery 不是我的强项。提前致谢！
编辑：我有一种感觉，我的其他一些 jQuery 函数正在干扰这个 .click function() 我的 #edit_stuff ID。我现在不想 post 我所有的代码，所以如果我在任何人有希望指导我找到我所缺少的东西之前弄清楚了，那么我会 post 在这里。
好吧，这可能真的很傻，但我解决了我自己的问题，这不是我想的那样。我的 python 模板 HTML 文件中有内联 JavaScript，我一直在使用 PyCharm。由于这是我第一次在 PyCharm 中实现 jQuery，因此我没有意识到 PyCharm 用于注释模板文件中未例外的 Django 代码的自动引号，特别是在脚本标签中。因此，由于信任 PyCharm 的注释热键，我在整个模板文件中都有 {# #} 引号标签，它使我的 jQuery 代码与 运行 保持一致。实际上，PyCharm 应该能够识别它是 jQuery 代码，并在您使用适当的注释块（// 或 /* */ for JavaScript）时突出显示并单击 CTRL+/。
再次。那里是我的错。这是我完成的有效代码（以防有人想知道）：
$('#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.");
}
});
我一直在尝试将 'Cancel' 按钮添加到一些现有的 HTML 和 jQuery 代码中，这些代码有一些 ajax 调用。我有 'Cancel' 按钮工作，但是它停止了我的 'Edit' 按钮的一些行为。我似乎无法弄清楚为什么 jQuery 单击事件不起作用。在 Firefox 中我得到：
Ignoring get or set of property that has [LenientThis] because the "this" object is incorrect.
编辑：我知道上述错误是 Firefox Dev 特定的错误，可能与我的代码无关。
但是我没有发现我使用 this 或单击 'Edit' 按钮时应该调用的函数有问题。事实上，我在同一页面上的另一个模块上有相同的 'Edit' 单击功能。
这是我的 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 函数，但这是我遇到的问题。如果这没有帮助，我可以 post 更多。 'Cancel' 按钮的功能是单独的，它基本上是在您单击 'Edit' 之前克隆 HTML，然后在用户点击取消时替换 HTML。如果您认为我也需要 post 该功能，请告诉我。
本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>
几乎所有模块都带有 'Edit' 按钮（'Cancel' 按钮被隐藏）。当您单击 'Edit' 时，它应该向模块中注入两个输入框，一个用于标题，一个用于描述。 'Edit' 按钮被 'Save' 取代，并且 'Cancel' 按钮变为可见。单击 'Edit' 时，除了注入两个输入框外，一切正常。这应该发生在 .click 事件函数的第一部分。我尝试将 this 更改为 #edit_stuff，没有任何区别。
我对使用 JavaScript 调试器（例如 Firefox 中的调试器）还很陌生，所以我并没有真正取得进展。因此，如果有人的建议包括我如何自己调试它，那就太好了。如您所见，这是 python 网络项目的一部分，jQuery 不是我的强项。提前致谢！
编辑：我有一种感觉，我的其他一些 jQuery 函数正在干扰这个 .click function() 我的 #edit_stuff ID。我现在不想 post 我所有的代码，所以如果我在任何人有希望指导我找到我所缺少的东西之前弄清楚了，那么我会 post 在这里。
好吧，这可能真的很傻，但我解决了我自己的问题，这不是我想的那样。我的 python 模板 HTML 文件中有内联 JavaScript，我一直在使用 PyCharm。由于这是我第一次在 PyCharm 中实现 jQuery，因此我没有意识到 PyCharm 用于注释模板文件中未例外的 Django 代码的自动引号，特别是在脚本标签中。因此，由于信任 PyCharm 的注释热键，我在整个模板文件中都有 {# #} 引号标签，它使我的 jQuery 代码与 运行 保持一致。实际上，PyCharm 应该能够识别它是 jQuery 代码，并在您使用适当的注释块（// 或 /* */ for JavaScript）时突出显示并单击 CTRL+/。
再次。那里是我的错。这是我完成的有效代码（以防有人想知道）：
$('#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.");
}
});