编程dijit创建导致dojo事件链中断

Question

我在处理JS onClick事件和Dojo时遇到了一些问题。 我试图实现的Waht是以某种方式编辑第一个单元格的数据。

考虑这个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.I'm开放的替代方法来实现这一...

[编辑]

我发现，这些似乎是问题的代码行：

operationsCell.innerHTML += "<button id=\"savebutton\">Save</button>"; 
operationsCell.innerHTML += "<button id=\"cancelbutton\">Cancel</button>"; 

只要执行第一个按钮，单元格内的所有按钮都会丢失其事件侦听器，即onclick。

有人知道这个的原因吗？

Answer 1

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

Answer 2

可能是这个人会帮你..

首先你要保存按钮临时变量的ID，你必须使用该变量来破坏控制

例如

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

我希望这会帮助你。