Javascript 在动态添加的节中动态添加/删除节

脚本应该具有添加或删除节的按钮。在该部分中，有用于添加或删除名为“行”的子部分的按钮。我遇到的问题是将行按钮链接到创建它们的部分。也就是说，无论它们属于哪个部分，它们都会在最后创建的部分中添加或删除。因此，我尝试将

sec

参数添加到

mod_row（）

中，但它似乎始终是

s

的当前值，而不是按钮创建时的

s

值

foo = document.createElement('p');
    var bar = document.createElement('button');
    bar.setAttribute('type','button');
    bar.onclick = function () { mod_row('add',s) };
    bar.appendChild(document.createTextNode('add row'));
foo.appendChild(bar);
    bar = document.createElement('button');
    bar.setAttribute('type','button');
    bar.onclick = function () { mod_row('del',s) };
    bar.appendChild(document.createTextNode('del row'));
foo.appendChild(bar);
section.appendChild(foo);

foo = document.createElement('div');
foo.setAttribute('id','magic_rows_'+s);
section.appendChild(foo);

function mod_row (mod,sec) {
    var row = "blah blah blah";
    var magic_rows = document.getElementById('magic_rows_'+sec);
    if (mod == 'add') {
        var new_p = document.createElement('p');
        new_p.setAttribute('id','row'+r);
        new_p.innerHTML = row;
        magic_rows.appendChild(new_p);
        r++;
    }
    else if (mod == 'del') {
        magic_rows.removeChild(magic_rows.lastChild);
        r--;
    }
}

---

这两个地方都有一个典型的闭包问题：

bar.onclick = function () { mod_row('add', s) };
//...
bar.onclick = function () { mod_row('del', s) };

问题是这两个函数中的

s

引用了外部作用域中的

s

，因此当调用单击处理程序时，它们最终将使用外部作用域完成时

s

所具有的任何值。在生成单击处理程序函数时，需要强制对

s

进行求值。通常的方法是使用函数生成回调函数：

bar.onclick = (function(inner_s) {
    return function() {
        mod_row('add', inner_s);
    }
})(s);
//...
bar.onclick = (function(inner_s) {
    return function() {
        mod_row('del', inner_s);
    }
})(s);

当您分配给

bar.onclick

而不是调用

bar.onclick

时，该额外的函数求值层强制求值

s

即使在声称没有指针的语言中，也无法摆脱指针的困扰

更新：这里有一个关于时髦的自动执行函数如何工作的说明。这：

bar.onclick = (function(inner_s) {
    return function() {
        mod_row('add', inner_s);
    }
})(s);

在功能上与此等效：

function closure_hack(inner_s) {
    return function() {
        mod_row('add', inner_s);
    }   
}
bar.onclick = closure_hack(s);

调用

closure\u hack

时，它被指定为

s

，并且

s

是对某个对象的引用。然后，在

closure\u hack

内部，

internal\u s

引用与

s

引用的对象相同的对象。在

closure\u hack

之外，

s

可以更改为引用不同的对象，但

内部的

仍然引用旧对象。函数调用（通过

closure\u hack

或惯用的自动执行函数）只是将变量名

s

与其引用的对象分离的一种方法：目标是抓住

s

所引用的内容，以便

s

可以在没有不良副作用的情况下更改

---

这是一件棘手的事情，需要一些时间来适应。闭包会让每个人都感到困惑，不要因为有点困惑而感到难过。

在这两个地方，你都有一个典型的闭包问题：

bar.onclick = function () { mod_row('add', s) };
//...
bar.onclick = function () { mod_row('del', s) };

问题是这两个函数中的

s

引用了外部作用域中的

s

，因此当调用单击处理程序时，它们最终将使用外部作用域完成时

s

所具有的任何值。在生成单击处理程序函数时，需要强制对

s

进行求值。通常的方法是使用函数生成回调函数：

bar.onclick = (function(inner_s) {
    return function() {
        mod_row('add', inner_s);
    }
})(s);
//...
bar.onclick = (function(inner_s) {
    return function() {
        mod_row('del', inner_s);
    }
})(s);

当您分配给

bar.onclick

而不是调用

bar.onclick

时，该额外的函数求值层强制求值

s

即使在声称没有指针的语言中，也无法摆脱指针的困扰

更新：这里有一个关于时髦的自动执行函数如何工作的说明。这：

bar.onclick = (function(inner_s) {
    return function() {
        mod_row('add', inner_s);
    }
})(s);

在功能上与此等效：

function closure_hack(inner_s) {
    return function() {
        mod_row('add', inner_s);
    }   
}
bar.onclick = closure_hack(s);

调用

closure\u hack

时，它被指定为

s

，并且

s

是对某个对象的引用。然后，在

closure\u hack

内部，

internal\u s

引用与

s

引用的对象相同的对象。在

closure\u hack

之外，

s

可以更改为引用不同的对象，但

内部的

仍然引用旧对象。函数调用（通过

closure\u hack

或惯用的自动执行函数）只是将变量名

s

与其引用的对象分离的一种方法：目标是抓住

s

所引用的内容，以便

s

可以在没有不良副作用的情况下更改

---

这是一件棘手的事情，需要一些时间来适应。闭包会让每个人都感到困惑，不要因为有点困惑而感到难过。

如果您使用闭包，这会容易得多。是的，我的第一个想法是

$（）。live（'click'）

。这太容易了！这是我的第一个javascript项目，自学。我希望不需要一个巨大的图书馆。。但也许我必须更仔细地看一看其中的一个。用原始JavaScript做第一个项目是个好主意，这将教会你一些基础知识。然后，当你继续使用一个常用的工具包时，你会有一个更好的基础；此外，如果你还不懂JavaScript，就不能使用工具包。如果你使用JavaScript，这会容易得多。是的，我的第一个想法是

$（）.live（'click'）

。这太容易了！这是我的第一个javascript项目，自学。我希望不需要一个巨大的图书馆。。但也许我必须更仔细地看一看其中的一个。用原始JavaScript做第一个项目是个好主意，这将教会你一些基础知识。然后，当你继续使用一个常用的工具包时，你会有一个更好的基础；此外，如果你还不懂JavaScript，就不能使用这些工具包。我正在使用这个解决方案，它工作得很好。但我不明白它是如何得到我想要的

s

评估的。通常在理解回调函数和匿名函数时有困难。不过，我正在努力解决这个问题。特别是，

bar.onclick=（…）（s）工作？显然，它以某种方式将
s
传递给内部的函数，但这是什么构造？@djeikyb：我添加了一个更新，希望能够解释自执行函数的情况以及它们被使用的原因。啊，这很有帮助，尤其是看到了长格式。并说明（）执行前面的anon函数。也找到了一个有帮助的，我