Question

以下是我的功能，其中我动态地向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应用于这些动态创建的元素？这些记录每次都会有所不同。有人可以帮我吗？

Answer 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移至要删除的元素

内联Javascript点击功能，用于在Chrome扩展程序中动态添加具有动态ID的元素

1 个答案: