プログラムによるディジット作成によりdojoイベント・チェーンが破損する

Question

JS onClickイベントとDojoの処理に問題があります。 私が達成しようとしているのは、何とか最初のセルインラインのデータを編集することです。私はJavaScriptで以下の（関連）メソッドを持っているこのすべてを処理するに

<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> 

：

は、このHTMLを考えてみましょう。

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 ...

[EDIT]

私はこれらのコードの問題の行のように見えることが判明：

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

最初のものが実行されるとすぐに、セル内のすべてのボタンがイベントリスナー、つまりonclickを失います。

誰でもこの理由を知っていますか？

Answer 1

ちょうど（Dojoコミュニティの助けを借りて）何が起こっているのか分かりましたので、ここで私は解決策を共有しました。

innerHTMlには新しいボタンタグが追加されていましたが、実際は+ =演算子が動作するため、置き換えられていました。 置き換えられると、元のコンテンツは破棄され、再作成されましたが、今回はイベントリスナー/イベントなしで再作成されました。トリックをしませんでした残念ながら

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

この1つはあなたを助けるかもしれませ..あなたがボタンtemp変数のIDを格納する必要があり、すべての最初の

、あなたがコントロール例

ため

を破壊し、その変数を使用する必要があります

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

これがあなたに役立つことを願っています。