主页 / coding / 问题 / 79556370
Accepted
Chu Man Ki Morris
Asked: 2025-04-05 07:27:06 +0800 CST

如何在 Chrome 扩展程序中对带有变量的函数执行 onclick 操作？

  • 772

我有以下代码，可以动态生成超链接。超链接可以成功生成。

索引.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>

脚本.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);
  });
});

但是，一旦生成超链接，onclick 操作就不起作用了。有人能帮我实现这个吗？谢谢。

google-chrome-extension

2 个回答

  1. Best Answer

    不...不要担心这些。innerhtml 很好...只是：

    1. 使用类而不是 ID 来生成内容（使用相同 ID 生成多个项目是一种不好的形式）。

    2. 关键是在内容生成期间（之后）创建事件处理程序

    一个功能应该可以让你顺利到达那里：

    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. 如果您愿意使用，innerHTML您可以使用onclick属性而不是附加事件。

    // 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>'
}

    在 HTML 中，id属性应该是唯一的，但您的代码会创建重复项。因此，即使innerHTML没有破坏附加事件，当文档引导具有该id的每个元素时，您也只会向一个元素添加事件。

    如果您不能使用 onclick 属性，则需要使用 DOM 函数来创建元素。

    这个答案展示了创建和附加元素的示例。（我在评论中链接的问题）

    • 0

相关问题