編程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(); 

我希望這會幫助你。