javascript - domConstruct 放置按钮未触发

Question

我正在使用 dojo domConstruct 动态创建表行。其中一列包含一个用于删除功能的按钮。但我不知道如何连接删除按钮的 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


});

我在这里没有任何线索。基本上我需要通过单击按钮从表中删除行。我在 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属性，它使您可以访问按钮节点本身。如果您使用Node.parentNode属性，您最终可以访问该行本身，然后可以使用 dojo/dom-construct::destroy() 删除它

例如:

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

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