0

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

2 回答 2

1

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

我相信那是因为您的点击事件正在冒泡。而且您无法通过内联处理程序阻止这种情况,请使用 jquery 绑定按钮单击。

于 2013-11-09T05:53:36.340 回答
0

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

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

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

于 2013-11-06T03:34:52.483 回答