domConstruct 放置按钮未触发

Question

我正在使用 dojo domConstruct 动态创建 table 行。其中一列包含一个删除按钮 function.But 我不知道如何为删除按钮连接 onclick 事件。下面是我创建行的 js 代码。

domConstruct.place("<tr class='test'><td>" +
    " Account name"+ XXXX+" "+" Account number is is $" + data1 +
    "</td><td><input type ='button' onclick='deleteFunction(this);' value='remove' id=" +
    buttonId + "/></td></tr>","tradeInValue","");

那么现在我如何将它连接到

on(dom.byId("buttonId"),"click",function(){

// my code goes in here


});

我在这里一无所知。基本上我需要在单击按钮时从 table 中删除行。我在 javascript 文件中使用 dojo。

已更新。

o

n(dom.byId("submitButton"), "click", function(evt){

        var name=registry.byId("name").get('value');
        var detail = registry.byId("manufacturer").get('value');
        var id=registry.byId("model").get('value');
        var make=registry.byId("shaft").get('value');

            var xhrArgs={
                    url:"./name/getValue",
                    content:{name:name,detail:detail,id:id,make:make},
                    handleAs:"json",
                    load:function(data){

                        var data1=data/100;
                        var row=domConstruct.create("tr",null,"tradeInValue");
                        domConstruct.create("td",{innerHTML:" Name
"+ detail+" "+id+"  Value is $"+data1},row);
                        var actions=domConstruct.create("td",null,row);
                        var btn=domConstruct.create("input",{
                            id:idRow,
                            type:"button",
                            value:"Remove"
                        },actions);

                        btn.addEventListener("click", function(evt) {
                              console.log("Deleting");
                              console.log(evt.target.parentNode.parentNode.idRow);
                              domConstruct.destroy(evt.target.parentNode.parentNode);
                            });

                        var test={ 
                                "name" : name,
                                "detail"  : detail,
                                "id" :id,
                                "tradePrice" :data,
                                "make":make

                        };

                        tradeDetails.clubDetails.push(test);

                        }
                    }



            var deferred=dojo.xhrPost(xhrArgs);

        }
    });

Answer 1

最简单的方法是单独创建 DOM 个节点，例如：

var row = domConstruct.create("tr", null, "myData");
domConstruct.create("td", { innerHTML: person.id }, row);
domConstruct.create("td", { innerHTML: person.name }, row);
var actions = domConstruct.create("td", null, row);
var btn = domConstruct.create("input", {
  type: "button",
  value: "Remove"
}, actions);

这使您可以轻松地将事件处理程序附加到 btn，同时仍然保留上下文并仍然可以访问您正在使用的数据，例如：

btn.addEventListener("click", function() {
  console.log("Deleting", person);  
});

要删除行本身，您可以使用 Event.target property, which gives you access to the button node itself. If you use the Node.parentNode property, you can eventually access the row itself, and then you can remove it using dojo/dom-construct::destroy()

例如：

btn.addEventListener("click", function(evt) {
  domConstruct.destroy(evt.target.parentNode.parentNode);
});

可以在 JSFiddle 上找到完整的示例。

domConstruct 放置按钮未触发

domConstruct place button not firing

html

javascript

dojo

button

rowdeleting