用于动态添加元素的内联 Javascript 点击功能，在 chrome 扩展中具有动态 id答案

【问题标题】：Inline Javascript click function for dynamically added elements with dynamic id's in chrome extension用于动态添加元素的内联 Javascript 点击功能，在 chrome 扩展中具有动态 id
【发布时间】：2019-11-10 05:05:29
【问题描述】：

以下是我的函数，我在其中动态地向 div 添加 HTML 元素。

function setTokenList(){

  if (!(localStorage.getItem("Token") === null)) {

    document.getElementById('showtokens').innerHTML = "";

    var Tokeninfo = JSON.parse(localStorage.getItem("Token"));

    for(var i=0; i < Tokeninfo.length;i++){
      var a = '<div class="grid-container tokenbackground">';
      a += '<div class="item2 tokenname"><i class="fas fa-share" title="Send Token"></i>';
      a += '<i class="fas fa-minus-circle hideicon" id="'+i+'_hidetoken" title="Hide Token" onclick="hideToken();"></i>';
      a += ' </div>';  
      a += ' </div>';    
      $('#showtokens').append(a);
    }
  }   
}

我想在 i 标记上调用 onclick="hideToken()，通过在点击时传递其 id 来删除该记录。我得到了错误。当我搜索类似的问题时，他们说，Chrome 扩展程序不允许您使用内联 JavaScript。分配一个 ID 并使用 addEventListener 来绑定事件。 但是如何将 addEventListener 用于这些动态创建的元素呢？这些记录每次都会有所不同。有人可以帮我解决这个问题吗？

【问题讨论】：

标签： javascript html google-chrome-extension

【解决方案1】：

你可以在像这样附加元素后附加事件

function setTokenList(){

  if (!(localStorage.getItem("Token") === null)) {

    document.getElementById('showtokens').innerHTML = "";

    var Tokeninfo = JSON.parse(localStorage.getItem("Token"));

    for(var i=0; i < Tokeninfo.length;i++){
      var a = '<div class="grid-container tokenbackground">';
      a += '<div class="item2 tokenname"><i class="fas fa-share" title="Send Token"></i>';
      a += '<i class="fas fa-minus-circle hideicon" id="'+i+'_hidetoken" title="Hide Token" onclick="hideToken();"></i>';
      a += ' </div>';  
      a += ' </div>';    
      $('#showtokens').prepend(a);
      $('#'+i+'_hidetoken').on('click', function(){
           $(this).remove();
      });
    }
  }   
}

注意元素上设置的id，以及css id选择器，如果需要，可以将id移动到要移除的元素上

【讨论】：