为什么要撤消此功能
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 来绑定按钮单击。
我怀疑您遇到了每次运行undo_changes
函数时都会将其他单击事件绑定到元素的情况。 如果你试试这个:
$(el).unbind('click').bind('click', box_click);
这将确保只有当前单击处理程序将绑定到该元素的单击事件。
相关文章:
- 添加文字和评论功能更新Div
- JavaScript打印功能使日历停止工作
- 每当您在选择器内移动鼠标时,悬停功能就会重复
- 如何防止网页加载后自动启动功能
- 除修剪外的其他功能
- 悬停功能触发器
- 使用angularjs向浏览器发送servlet响应(下载功能)
- 删除CKEditor工具栏按钮,但不删除功能
- 异步facebook功能
- 如何将chrome扩展功能移植到移动设备(特别是jquery和trello)
- jQuery滚动功能只工作一次
- Graphiti中是否有任何工具提示功能
- React redux初始化功能,无论状态变化如何
- 在哪里可以学习ECMAScript标准中尚未包含的JavaScript功能
- 正在获取select上的功能id
- 为什么要撤消此功能
- 谷歌地图api v3:为编辑后的多边形添加自定义撤消/重做功能
- 重置HTML表单字段(避免撤消功能)
- Knockout Js绑定到具有撤消功能的编辑模态
- 使用createRange()维护撤消功能