Question

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

有人知道这个的原因吗？

Answer 1

可能这个会帮助你..

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

例如

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

我希望这会对你有所帮助。

Answer 2

确定。刚刚弄清楚发生了什么（在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);
}

程序化的dijit创建导致dojo事件链断开

2 个答案: