递归函数与removeEventListener
我想写一个动态按钮创建者。所以我有html文件
<body>
<button id="0" type="button" onclick="create_button(0)">Create button 1</button>
</body>以及“模拟”适当动作的js文件。
var counter = 0;
function create_button(n) {
/*Shift up*/
for (i=counter; i>n; i--) {
document.getElementById(i).id = i+1;
document.getElementById(i+1).innerHTML = i+1;
};
/*Create new button*/
var new_button = document.createElement("Button");
new_button.innerHTML = n+1;
new_button.type = "button";
new_button.id = n+1;
function helper() {
create_button(n+1);
};
new_button.addEventListener('click', helper );
document.body.insertBefore(new_button,document.getElementById(n).nextSibling);
counter++;
};然而，/*Shift up*/部件只改变按钮的id和innerHTML，而不改变click的操作。因此，为了解决这个问题，我需要在/*Shift up*/中添加两行代码，它们应该作为
document.getElementById(i+1).addEventListener('click', helper(i+1) );
document.getElementById(i+1).removeEventListener('click', helper(i) );显然，这是行不通的。由于create_button函数的递归性质，我认为helper应该移出create_button之外。但我不知道该怎么做。
一些附加信息----我简化了代码，但实际上按钮有一些依赖于n的附加函数。所以我们把帮手改为
function helper() {
create_button(n+1);
alert(n+1);
};在https://jsfiddle.net/o3Lsttyq/3/中可以看到警报的内容。单击例如1、1、3。
回答 1
Stack Overflow用户
发布于 2016-04-15 21:43:02
由于您正在调整id，以便它始终与当前索引相匹配，并且您的函数helper需要相同的索引，所以您所需要做的似乎是将helper函数移出并更改为如下所示：
function helper(){
var n1 = this.id; // effectively "n+1"
alert(n1);
}您也不需要用这个参数调用create_button，因为您想要的数据可以从this中提取出来。
(而且，您不应该将id属性用于这类事情。相反，您应该使用data-前缀属性，如描述的这里。此外，使用this而不是getElementById()进行重构意味着您可以不再需要跟踪元素的索引。)
为乐趣而重构：
<body>
<button type="button">Create button 1</button>
</body>function create_button(){
var index = (this.innerHTML|0) + 1;
var new_button = document.createElement("button");
new_button.type = "button";
new_button.addEventListener('click',create_button);
document.body.insertBefore(new_button,this.nextSibling);
var target = new_button;
while(target) {
target.innerHtml = index;
target = target.nextSibling;
index += 1;
}
}
document.body.getElementsByTagName("button")[0].addEventListener('click',create_button);https://stackoverflow.com/questions/36655963
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号