Встроенная функция щелчка JavaScript для динамически добавляемых элементов с динамическими идентификаторами в расширении Chrome

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

Я хочу вызвать onclick="hideToken() для i , чтобы удалить эту запись, передав ее идентификатор по клику. Я получил ошибку. Когда я ищу похожие проблемы, они говорят, что Chrome Extensions не позволяют вам иметь встроенный 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();
      });
    }
  }   
}

обратите внимание на идентификатор, установленный для элемента, и селектор идентификатора css, если необходимо, вы можете переместить идентификатор в элемент, который хотите удалить