为什么撤消此功能？

Question

我有一个包含大量数据的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');
}

Answer 1

bfavaretto的以下评论解决了我的问题：

  

我相信这是因为你的点击事件正在冒泡。并且您无法使用内联处理程序阻止它，使用jquery绑定按钮单击。

Answer 2

我怀疑您每次运行undo_changes函数时都会遇到其他点击事件绑定到元素的情况。如果你试试这个怎么办：

 $(el).unbind('click').bind('click', box_click);

这将确保只有当前点击处理程序将绑定到该元素的click事件。