Question

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

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('alert');});

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

我猜你没有足够的信息来解决问题，但也许你可以给我一些我应该看的提示。

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

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

    this.showNewsPostSingle(container, newsPostArray[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));
};

哪个电话：

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;
};

控制台显示： 4 3 2 1

其他更新：通过使用开发工具在Chrome中逐步调试，似乎每个链接都会在下一次失去点击事件

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

在第一个循环中执行。附加到父innerHTML（这一个或另一个）的任何原因会删除添加的事件监听器吗？

Answer 1

通过逐行调试，我发现了下一个.innerHTML + =正在删除事件。

由此，我找到了这个问题： Manipulating innerHTML removes the event handler of a child element? 我能够通过使用：

来解决我的问题

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

Answer 2

我模拟了你的代码，它对我来说很好。

https://jsfiddle.net/zqt4bjtt/

遵循用于模拟的JS代码。请参阅jsfiddle进行完整模拟

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++;

}

错误可能是你的this.newsPost.id没有改变。很难用提供的代码片段来判断

Javascript addEventListener在3个链接上，只有1个工作

2 个答案: