为什么取消此功能? [英] Why is this function being undone?

问题描述

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

解决方案

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

我认为这是因为您的点击事件正在冒泡.而且，使用内联处理程序无法阻止这种情况，请使用jquery绑定按钮单击.

I have an HTML table that contains a lot of data. Certain cells can be clicked on, and when they do, their contents are replaced with an editing interface, which includes among other things a cancel button.

When the cancel button is clicked, the following Javascript (with a bit of jQuery) is run:

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');
}

The cancel button is implemented as follows (this.parentNode refers to the cell):

<button onclick="undo_changes(this.parentNode)">Cancel</button>

When I click the cancel button, nothing appears to change. When I step through the code in the debugger, the changes happen as expected. However, upon reaching the end of the function, suddenly all the changes are reverted. What's going on?

I'm running Chromium under Ubuntu and jQuery 1.10.2.

Further details

The debugger shows the following below my function on the call stack. I don't pretend to understand it.

(function() {with (this[2]) {with (this[1]) {with (this[0]) {return function(event) {undo_changes(this.parentNode)
};}}}})

For some reason, upon leaving my function, execution jumps to jQuery at line 4761. Following that, jQuery somehow calls my function box_click() which creates what I'm trying to delete.

By request

As I type this edit, the problem has been solved. Nevertheless, I was asked to show box_click(), which creates the editing interface. Here's the version that was current when I originally posted the question:

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');
}

解决方案

The following comment by bfavaretto solved my problem:

I believe that's because your click event is bubbling up. And you can't prevent that with an inline handler, use jquery to bind the button click.

这篇关于为什么取消此功能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！