Question

关于.js脚本中没有执行功能的按钮，我几天都遇到了问题。

此处我的代码位于popup.html：

<html>
<head>
<script src="popup.js"></script>
</head>

<body>
<div id="panier_container"> </div>
</body>

</html>

此处我的代码位于popup.js：

chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {

//Message en provenance du background
if (msg.text === 'panier') {
var panier_container = document.getElementById("panier_container");
panier_container.innerHTML ="<button id=\"totoButton\"> Affiche TOTO    </button>";
 }   

});

//Fonction toto
function toto() {
    alert("toto");
}

document.addEventListener('DOMContentLoaded', function() {
document.getElementById("totoButton").addEventListener("click", toto);
});

当我执行代码时，我看到弹出窗口中的按钮，但是当我点击按钮时，没有任何反应。有关信息msg来自我的background.js。

但如果我在popup.js内写下这段代码，那一切都可以：

var panier_container = document.getElementById("panier_container");
panier_container.innerHTML ="<button id=\"totoButton\"> Affiche TOTO </button>";

//Fonction toto
function toto() {
    alert("toto");
}

document.addEventListener('DOMContentLoaded', function() {
document.getElementById("totoButton").addEventListener("click", toto);
});

使用此代码，我看到了按钮，当我点击它时，我看到toto（函数已执行）。

你知道为什么在循环chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {内按钮不执行函数toto吗？

Answer 1

尝试使用popup.js：

document.getElementById("totoButton").addEventListener("click", toto);

您的代码{{1}}在实际元素存在之前被称为，因为该元素是在收到邮件后创建的。

Chrome扩展程序：chrome.runtime.onMessage.addListener中的函数

1 个答案: