我在处理 JS onClick 事件和 Dojo 时遇到了一些问题。我想要实现的是以某种方式编辑第一个内联单元格中的数据。
考虑这个 HTML:
<table class="datatable" id="officestable" name="officestable">
<tr>
<td>xxxxx</td>
<td>
<button id="officeeditbtn3" data-dojo-type="dijit.form.Button" type="button" data-dojo-props="iconClass:'advanEditIcon',onClick: function() { editOfficeFieldInline(this, 3); }">Edit</button>
<button id="officeconfigbtn3" data-dojo-type="dijit.form.Button" type="button" data-dojo-props="iconClass:'advanConfigIcon',onClick: function() { configOffice(this, 3); }">Config</button>
<button id="officeremovebtn3" data-dojo-type="dijit.form.Button" type="button" data-dojo-props="iconClass:'advanRemoveIcon',onClick: function() { removeOffice(this, 3); }">Remove</button>
</td>
</tr>
为了处理这一切,我在 javascript 中有以下(相关)方法。
function editOfficeFieldInline(buttonElem, officeid) {
var table = document.getElementById("officestable"); //get table
var operationsCell = buttonElem.domNode.parentNode; // get second cell where button are
var trline = operationsCell.parentNode; // get tr element
var dataCell = trline.firstChild; // get cell where data is to be edited
var currentContent = dataCell.innerHTML; // ... self explainable...
var tdcellHTML;
tdcellHTML = "<input id=\"editofficebox\" type=\"text\">"; // adding an input placeholder
dataCell.innerHTML = tdcellHTML; // replace cell content with edit box
// attach dijit to pre-created edit box
var editofficebox = new dijit.form.TextBox({
value: currentContent,
style: {
width: "190px",
}
},
"editofficebox");
addSaveCancelButtons(table,
operationsCell,
function(){
// 'save' actions
// save new data using ajax (working!)
saveOfficeName(officeid, dataCell, currentContent, operationsCell);
},
function(){
// 'cancel' actions
destroyOfficeFieldInline(table, false);
setCellVal(dataCell, currentContent);
}
);
}
function addSaveCancelButtons(table, operationsCell, saveAction, cancelAction) {
operationsCell.innerHTML += "<button id=\"savebutton\">Save</button>";
operationsCell.innerHTML += "<button id=\"cancelbutton\">Cancel</button>";
var savebutton = new dijit.form.Button({
iconClass: "advanSaveIcon",
onClick: saveAction
},
"savebutton");
var cancelbutton = new dijit.form.Button({
iconClass: "advanCancelIcon",
onClick: cancelAction,
},
"cancelbutton");
}
// this is a generic function. parameters are not really needed in this case
function destroyOfficeFieldInline(tableElement, bNew) {
dijit.byId("editofficebox").destroy();
destroySaveCancelButtons();
if (bNew) {
destroyNewRow(tableElement);
}
}
function destroySaveCancelButtons() {
dijit.byId("savebutton").destroy();
dijit.byId("cancelbutton").destroy();
}
function setCellVal(cell, val) {
cell.innerHTML = val;
}
现在,代码第一次工作。但是不知何故,如果我在单击“编辑”后单击“取消”,那么再次按“编辑”将无济于事。不会再次创建动态字段。我猜有些东西没有被正确清理,但我没有想法......这段代码有什么问题?
PS.我对实现这一目标的替代方法持开放态度......
[编辑]
我发现这些似乎是有问题的代码行:
operationsCell.innerHTML += "<button id=\"savebutton\">Save</button>";
operationsCell.innerHTML += "<button id=\"cancelbutton\">Cancel</button>";
一旦第一个被执行,单元格内的所有按钮都会失去它们的事件监听器,即 onclick。
有谁知道这是什么原因?