Javascript addEventListener在3个链接上，只有1个可用

我正在尝试使用以下代码在链接上动态添加事件侦听器（当然，使用不同的this.newsPost.id调用了3次）：

第一行是调试行，以查看访问DOM事件是否有问题。但令人惊讶的是，第一行用yahoooo1或2或3更新了3个链接，但第二行仅在第三个链接上附加事件

我猜你没有足够的信息来解决这个问题，但也许你可以给我一些提示，我应该去哪里找

---

为了提供更多信息，我在这里循环：

for (var i = 0; i < newsPostArray.length; ++i) {
    if (i != 0) {
        container.innerHTML += '<hr />';
    }

    this.showNewsPostSingle(container, newsPostArray[i]);
}

for（变量i=0；i

那么我有：

UserNewsPostList.prototype.showNewsPostSingle = function (container, newsPost) {
    var content = '<div class="user_news_post">';
    content += '<div id="user_news_post_comment_' + newsPost.id + '" class="user_news_post_comment"></div>';
    content += '</div>';
    container.innerHTML += content;
    new UserNewsPostListComment(newsPost).show(document.getElementById('user_news_post_comment_' + newsPost.id));
};

UserNewsPostList.prototype.showNewsPostSingle=函数（容器，新闻发布）{
var内容=“”；
内容+=''；
内容+=''；
container.innerHTML+=内容；
新用户newspostlistcomment（newsPost.show）（document.getElementById（'user\u news\u post\u comment\u+newsPost.id））；
};

这要求：

function UserNewsPostListComment(newsPost) {
    this.newsPost = newsPost;
}

UserNewsPostListComment.prototype.show = function(container) {
    var content = '';

    content += this.getNewsPostHTMLSingleCommentPartAdd();
    container.innerHTML = content;

    window.console.log(this.newsPost.id);

    document.getElementById('user_news_post_comment_add_button_show_form_' + this.newsPost.id).innerHTML = 'yahoooooo' + this.newsPost.id;
    document.getElementById('user_news_post_comment_add_button_show_form_' + this.newsPost.id).addEventListener('click', function() {alert('attachEvents');});
};

UserNewsPostListComment.prototype.getNewsPostHTMLSingleCommentPartAdd = function() {
    var content = '<div class="user_news_post_comment_add">';

    content += '<a id="user_news_post_comment_add_button_show_form_' + this.newsPost.id + '">LINK</a>';

    content += '</div>';

    return content;
};

函数UserNewsPostListComment（newsPost）{
this.newsPost=newsPost；
}
UserNewsPostListComment.prototype.show=函数（容器）{
var内容=“”；
content+=this.getNewsPostHTMLSingleCommentPartAdd（）；
container.innerHTML=内容；
window.console.log（this.newsPost.id）；
document.getElementById（'user\u news\u post\u comment\u add\u button\u show\u form\u'+this.newsPost.id.）.innerHTML='yahoooooooo'+this.newsPost.id；
document.getElementById（'user_news_post_comment_add_button_show_form_'+this.newsPost.id.）.addEventListener（'click'，function（）{alert（'attachEvents'）；}）；
};
UserNewsPostListComment.prototype.getNewsPostHTMLSingleCommentPartAdd=函数（）{
var内容=“”；
内容+=‘链接’；
内容+=''；
返回内容；
};

控制台显示： 4. 3. 2. 一,

---

附加更新：通过使用开发工具在Chrome中进行分步调试，似乎每个链接在下一个链接时都会丢失单击事件

 container.innerHTML += '<hr />'; 

container.innerHTML+='
'；

---

在第一个循环中执行。为什么附加到父innerHTML（这一个或另一个）会删除添加的事件侦听器？

我模拟了您的代码，它对我来说工作正常

下面是用于模拟的JS代码。请参阅JSFIDLE以获得完整的模拟

id = 1;
while(id < 4){
    document.getElementById('user_news_post_comment_add_button_show_form_' + id).innerHTML = 'yahoooooo' + id;
    document.getElementById('user_news_post_comment_add_button_show_form_' + id).addEventListener('click', function() {alert(this.id);});
  id++;

}

id=1；
而（id<4）{
document.getElementById（'user\u news\u post\u comment\u add\u button\u show\u form\u'+id.）.innerHTML='yahoooooo'+id；
document.getElementById（'user_news_post_comment_add_button_show_form_'+id.）.addEventListener（'click'，function（）{alert（this.id）；}）；
id++；
}

---

可能是错误，可能是您的this.newsPost.id没有更改。使用提供的代码片段很难说

我模拟了您的代码，它对我来说运行良好

下面是用于模拟的JS代码。请参阅JSFIDLE以获得完整的模拟

id = 1;
while(id < 4){
    document.getElementById('user_news_post_comment_add_button_show_form_' + id).innerHTML = 'yahoooooo' + id;
    document.getElementById('user_news_post_comment_add_button_show_form_' + id).addEventListener('click', function() {alert(this.id);});
  id++;

}

id=1；
而（id<4）{
document.getElementById（'user\u news\u post\u comment\u add\u button\u show\u form\u'+id.）.innerHTML='yahoooooo'+id；
document.getElementById（'user_news_post_comment_add_button_show_form_'+id.）.addEventListener（'click'，function（）{alert（this.id）；}）；
id++；
}

---

可能是错误，可能是您的this.newsPost.id没有更改。通过逐行调试提供的代码片段很难说，我发现next.innerHTML+=正在删除事件

由此，我发现了这个问题： 我可以通过以下方法解决我的问题：

.insertAdjacentHTML('beforeend', 'test');
// instead of
.innerHTML += 'test';

---

通过逐行调试，我发现next.innerHTML+=正在删除事件

由此，我发现了这个问题： 我可以通过以下方法解决我的问题：

.insertAdjacentHTML('beforeend', 'test');
// instead of
.innerHTML += 'test';

---

你应该多展示一点代码，这样我们就可以理解这篇文章的结尾，或者关注一下你的包装环境。如果你能发布一个最小但可验证的示例代码，HTML，JS，那就更好了……我相信你需要使用IIFE。请为我们发布更多代码以帮助您更好。发布更多代码，并且由于链接的innerHTML在第一个getElementById中使用正确的id进行更新，我认为id不是问题所在：我得到了Yahooo1，Yahoooo2，Yahoooo3，yahoooo4 show你应该多展示一点代码，这样我们就可以了解

这个

的结尾是什么，或者了解一下你的包装环境。如果你能发布一个最小但可验证的示例代码，HTML，JS，那就更好了……我相信你需要使用iLife。请为我们发布更多代码以帮助您更好。发布更多代码，并且由于链接的innerHTML在第一个getElementById中使用正确的id进行更新，我认为id不是问题所在：我显示了yahooo1、yahooo2、yahooo3、yahooo4