0

我在处理 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。

有谁知道这是什么原因?

4

2 回答 2

0

可能这个会帮助你..

首先,您必须将按钮的 id 存储在 temp 变量中,并且您必须使用该变量来销毁控件

例如

var temp = dijit.byId('savebutton');
temp.destroy();

我希望这能帮到您。

于 2012-04-17T07:21:51.323 回答
0

行。刚刚弄清楚发生了什么(在 Dojo 社区的帮助下),所以我回到这里分享解决方案。

innerHTMl (据说)附加了新的按钮标签,但实际上它已被替换,因为 += 运算符的工作方式。替换时,原始内容被销毁,然后重新创建,但这次没有事件侦听器/事件。

因此,解决方案是使用 dijit placeAt 方法:

function addSaveCancelButtons(table, operationsCell, saveAction, cancelAction) {
var savebutton = new dijit.form.Button({
    id: "savebutton",
    iconClass: "advanSaveIcon",
    label: "Guardar",
    onClick: saveAction
    }).placeAt(operationsCell);

var cancelbutton = new dijit.form.Button({
    id: "cancelbutton",
    iconClass: "advanCancelIcon",
    label: "Cancelar",
    onClick: cancelAction,
    }).placeAt(operationsCell);
}
于 2012-04-18T23:12:20.903 回答