我一直试图添加“取消”＆＃39;按钮到一些现有的HTML和jQuery代码，它们有一些ajax调用。我有＆＃39;取消＆＃39;按钮工作，但它停止了我的编辑＆＃39;的一些行为。按钮。我似乎无法弄清楚为什么jQuery click事件不起作用。在Firefox中我得到：
忽略具有[LenientThis]的get或set属性，因为＆＃34; this＆＃34;对象不正确。
编辑：我知道上述错误是Firefox Dev特定错误，可能与我的代码无关。
但是，我没有看到使用this的问题，或者在编辑＆＃39;时应该调用的函数。单击按钮。事实上，我有同样的编辑＆＃39;点击同一页面上另一个模块的功能。
这是我的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函数，但这是我遇到的问题。如果这没有用，我可以发布更多内容。我的功能是取消＆＃39;按钮是单独的，在您单击“编辑”之前基本上克隆HTML，然后在用户点击取消时替换HTML。如果您认为我也需要发布该功能，请告诉我。
HTML for this：
<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>
几乎所有模块都带有一个＆＃39;编辑＆＃39;按钮（＆＃39;取消＆＃39;按钮被隐藏）。点击＆＃39;编辑＆＃39;它应该在模块中注入两个输入框，一个用于标题，一个用于描述。 ＆＃39;编辑＆＃39;按钮被＆＃39; Save＆＃39;取代并且“取消”＆＃39;按钮变得可见。当您点击“编辑”时，除了注入两个输入框外，一切正常。这应该发生在.click事件函数的第一部分。我尝试将this更改为#edit_stuff，没有任何区别。
我是使用JavaScript调试器的新手，比如Firefox中的调试器，所以我真的无处可去。因此，如果任何人的建议包括我如何自己调试，这将是伟大的。正如您所看到的，这是python Web项目的一部分，jQuery不是我强大的语言。提前谢谢！
编辑：我觉得我的其他一些jQuery函数正在弄乱这个.click函数（）我有#edit_stuff ID。我现在不想发布我的所有代码，所以如果我在任何人希望引导我找到我所缺少的内容之前弄明白，那么我会在这里发布。答案 0 :(得分：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.");
}
});