关于javascript用循环创建的标签,添加事件的问题

zy3365265 2010-01-25 09:59:40

var ids = 0;
function add(){
var f = document.getElementById("divVoteItem");
var fd = document.createElement("fieldset");
fd.id = ids + "";
var ld = document.createElement("legend");
ld.innerHTML = prompt("请输入项目标题","标题");
if("null" == ld.innerHTML)
{
return;
}
fd.appendChild(ld);
for(var i=0;i<3;i++){
var br = document.createElement("p");
var txt = document.createElement("input");
txt.id = fd.id + "-" + i
txt.style.width = "85%";
var del = document.createElement("button");
del.onclick = function DelOption(){document.getElementById(txt.id).parentNode.removeChild(document.getElementById(txt.id));del.style.display='none';};
del.value="删除";
fd.appendChild(txt);
fd.appendChild(del);
fd.appendChild(br);
alert(txt.id);
}
f.appendChild(fd);
ids++;
}





添加事件的代码: del.onclick = function DelOption(){document.getElementById(txt.id).parentNode.removeChild(document.getElementById(txt.id));
在删除的时候不管点哪个按钮,都只会删除最后一个,这是为什么呢?
...全文
317 8 打赏 收藏 举报
写回复
8 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
michaelzhouh 2010-01-26
  • 打赏
  • 举报
回复
如果实在不能理解闭包,就用事件绑定

function addEventHandler(oTarget,sEventType,fnHandler){
if(oTarget.addEventListener){
oTarget.addEventListener(sEventType,fnHandler,false)
}else if(oTarget.attachEvent){
oTarget.attachEvent("on"+sEventType,fnHandler)
}else{
oTarget["on"+sEventType]=fnHandler
}
};
function removeEventHandler(oTarget,sEventType,fnHandler){
if(oTarget.removeEventListener){
oTarget.removeEventListener(sEventType,fnHandler,false)
}else if(oTarget.detachEvent){
oTarget.detachEvent("on"+sEventType,fnHandler)
}else{
oTarget["on"+sEventType]=null
}
};
yixianggao 2010-01-26
  • 打赏
  • 举报
回复
清理一下 DelOption!

L@_@K
function DelOption(deleteButton) {
if (!IsDefined(deleteButton)) {
deleteButton = this;
}

DeleteTextbox(deleteButton);

Disappear(deleteButton);
}

function IsDefined(obj) {
return obj !== undefined;
}

function DeleteTextbox(btn) {
if (IsDefined(btn.delTarget)) {
btn.parentNode.removeChild(btn.delTarget);
}
}

function Disappear(ele) {
ele.style.display = 'none';
}
yixianggao 2010-01-26
  • 打赏
  • 举报
回复
呵呵,“闭包”就算了,MS 曾尝试过使用它,但最终还是放弃了这种方案!
俺还是喜欢拆包!

L@_@K
function IsDefined(obj) {
return obj !== undefined;
}

function DelOption(deleteButton) {
if (!IsDefined(deleteButton)) {
deleteButton = this;
}
if (IsDefined(deleteButton.delTarget)) {
deleteButton.delTarget.parentNode.removeChild(deleteButton.delTarget);
}
deleteButton.style.display = 'none';
}

var ids = 0;
function add(){
var f = document.getElementById("divVoteItem");
var fd = document.createElement("fieldset");
fd.id = ids + "";
var ld = document.createElement("legend");
ld.innerHTML = prompt("请输入项目标题","标题");
if("null" == ld.innerHTML)
{
return;
}
fd.appendChild(ld);
for(var i=0;i<3;i++){
var br = document.createElement("p");
var txt = document.createElement("input");
txt.id = fd.id + "-" + i
txt.style.width = "85%";
var del = document.createElement("button");
// 为动态属性 delTarget 赋值!
del.delTarget = txt;
del.onclick = DelOption;
del.value="删除";
fd.appendChild(txt);
fd.appendChild(del);
fd.appendChild(br);
alert(txt.id);
}
f.appendChild(fd);
ids++;
}
sjkof 2010-01-26
  • 打赏
  • 举报
回复
[Quote=引用 4 楼 zy3365265 的回复:]
不太明白,闭包?
[/Quote]

就是子函数引用父函数变量,是看这个变量的当前的值,而不是当时调用的时候的值
可以使用参数传递进子函数避免这个问题
zy3365265 2010-01-25
  • 打赏
  • 举报
回复
不太明白,闭包?
friendly_ 2010-01-25
  • 打赏
  • 举报
回复
del.onclick = (function DelOption(id){
return function(){
document.getElementById(id).parentNode.removeChild(
document.getElementById(id));
this.style.display = "none";
}
})(txt.id);
xmliy 2010-01-25
  • 打赏
  • 举报
回复
闭包问题


for(var i=0;i<3;i++){
(function (i) {
....
})(i);
}
sohighthesky 2010-01-25
  • 打赏
  • 举报
回复

for(var i=0;i<3;i++){
(function(i){
var br = document.createElement("p");
var txt = document.createElement("input");
txt.id = fd.id + "-" + i
txt.style.width = "85%";
var del = document.createElement("button");
del.onclick = function DelOption(){document.getElementById(txt.id).parentNode.removeChild(document.getElementById(txt.id));del.style.display='none';};
del.value="删除";
fd.appendChild(txt);
fd.appendChild(del);
fd.appendChild(br);
alert(txt.id);

})(i)

}
相关推荐
发帖
JavaScript

8.7w+

社区成员

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
帖子事件
创建了帖子
2010-01-25 09:59
社区公告
暂无公告