我正在使用 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);
}
});
最佳答案
最简单的方法是单独创建 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 上找到。 .
关于javascript - domConstruct 放置按钮未触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32896826/