我有一个包含大量数据的 HTML 表。可以单击某些单元格，当它们单击时，它们的内容将替换为编辑界面，其中包括一个取消按钮。
单击取消按钮时，将运行以下 Javascript（带有一点 jQuery）：
function undo_changes(el) {
// Restore the previously-stored original innerHTML and event handler
el.innerHTML = cell_contents;
cell_contents = undefined;
$(el).bind('click', box_click);
// Restore the form's action and events
$(main_form).attr('action',main_form_destination).attr('onchange', 'return true');
}
取消按钮实现如下（this.parentNode指单元格）：
<button onclick="undo_changes(this.parentNode)">Cancel</button>
当我单击取消按钮时，似乎没有任何变化。当我在调试器中单步执行代码时，更改按预期发生。然而，在函数结束时，突然间所有的变化都被还原了。这是怎么回事？
我在 Ubuntu 和 jQuery 1.10.2 下运行 Chromium。
更多详细信息
调试器在调用堆栈上的我的函数下方显示以下内容。我不假装明白。
(function() {with (this[2]) {with (this[1]) {with (this[0]) {return function(event) {undo_changes(this.parentNode)
};}}}})
出于某种原因，离开我的函数后，执行在第 4761 行跳转到 jQuery。之后，jQuery 以某种方式调用了我的函数box_click()，该函数创建了我要删除的内容。
按要求
当我键入此编辑时，问题已解决。然而，我被要求显示box_click()，它创建了编辑界面。这是我最初发布问题时的最新版本：
function box_click() {
if(cell_contents) {
alert('Please deal with the other place you\'re editing first.');
return false;
}
var id = this.id;
var student_id = $(this).attr('student_id');
var class_date = $(this).attr('date');
var html = make_radio('attendance','None',get_current(this) == 'None');
html += make_radio('attendance','Present',get_current(this) == 'Present');
html += make_radio('attendance','Absent',get_current(this) == 'Absent');
html += make_radio('attendance','Tardy',get_current(this) == 'Tardy');
html += '<input type="hidden" name="student_id" value="'+student_id+'">';
html += '<input type="hidden" name="class_date" value="'+class_date+'">';
html += '<button onclick="undo_changes(this.parentNode)">Cancel</button>';
cell_contents = this.innerHTML;
var f = $(main_form);
main_form_destination = f.attr('action');
f.attr('action', '/classes/ajax_update_attendance/'+id+'/<?=$class_id?>').attr('onchange', 'submit(this)'); // There's a smattering of PHP on this line
this.innerHTML = html;
$(this).unbind('click');
}