Início / coding / Perguntas / 79556370
Accepted
Chu Man Ki Morris
Asked: 2025-04-05 07:27:06 +0800 CST

Como executar a ação onclick em funções com variáveis ​​nas extensões do Chrome?

  • 772

Tenho o seguinte código em que o hyperlink será gerado dinamicamente. Os hyperlinks podem ser gerados com sucesso.

índice.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Timely</title>
  </head>
  <body id=settingbg>
  <a href=index.html>Home</a>
    <div id="stopping"><div id=stopitem></div>
  </body>
  <script src="setting.js"></script>
</html>

script.js

let stopping = document.getElementById("stopping");

showstop();

function showstop(){
    chrome.storage.local.get(['stops'], function(result) {
        let stopsp = (result.stops).split(",");
        for(i=0;i<stopsp.length;i++){
            stopping.innerHTML += "<div id=stopitem><a href='#' id='linkPassValue' data-value='"+stopsp[i]+"'>"+stopsp[i]+"</a></div>";
        }
    });
}

document.addEventListener('DOMContentLoaded', function() {
  document.querySelector('#linkPassValue')?.addEventListener('click', function(e) {
    e.preventDefault();
    const value = this.getAttribute('data-value');
    alert(value);
  });
});

No entanto, a ação onclick não funciona uma vez que os hiperlinks são gerados. Alguém pode me ajudar a conseguir isso? Obrigado.

google-chrome-extension

2 respostas

  1. Best Answer

    Nah... não se preocupe com tudo isso. innerhtml está bom... apenas:

    1. Use classes em vez de IDs para conteúdo gerado (é ruim gerar vários itens com o mesmo ID).

    2. A chave será criar o manipulador de eventos durante (logo após) a geração de conteúdo

    Uma função deve ajudar você a chegar lá:

    function showstop() {
  chrome.storage.local.get(['stops'], function(result) {
    let stopsp = result.stops.split(",");
    const container = document.getElementById('stopping');
    container.innerHTML = ''; // Clear previous content if needed

    for (let i = 0; i < stopsp.length; i++) {
      // Use class instead of duplicate IDs
      container.innerHTML += "<div class='stopitem'><a href='#' class='linkPassValue' data-value='" + stopsp[i] + "'>" + stopsp[i] + "</a></div>";
    }
  });

  document.querySelector('#stopping').addEventListener('click', function(event) {
    event.preventDefault();

    const target = event.target;

    if (target.classList.contains('linkPassValue')) {
      const value = target.getAttribute('data-value');
      alert(value);
    }
  });
}

showstop();
    • 1

  2. Se você quiser usar, innerHTMLpode usar o onclickatributo em vez de anexar o evento.

    // Global function to handle the events
function clickEvent(e) {
    e.preventDefault();
    Alert(e.target.getAttribute('data-value'))
}

for (....) {
    stopping.innerHTML += '<a onclick="clickEvent(this):">...</a>'
}

    Em HTML, espera-se que o atributo id seja único, seu código cria duplicatas. Então, mesmo que innerHTML não tenha quebrado eventos anexados, você está apenas adicionando eventos a um elemento quando o documento lidera, não a todos os elementos com esse id .

    Se você não puder usar o atributo onclick, precisará criar os elementos usando funções DOM.

    Esta resposta mostra um exemplo de criação e adição de elementos. (A pergunta que vinculei no meu comentário)

    • 0

relate perguntas