gpt4 book ai didi

javascript - 在 DOM 之后加载新元素后检测点击

转载 作者:行者123 更新时间:2023-12-02 22:22:48 25 4
gpt4 key购买 nike

我正在尝试创建一个简单的 Chrome 插件 - 但是我遇到了一个问题。

我正在尝试使用简单的 getElementById 来检测对 div 的点击 - 但是,由于 api 调用是在 DOM 加载之后发生的,因此 JS 无法“找到”任何 div,并给出错误并且不会单击该元素后不执行任何操作。

加载 API 中的数据后,如何检测点击?我在下面包含了一些代码:

谢谢

    document.addEventListener('DOMContentLoaded', function () {

var checkPageButton = document.getElementById('checkPage');

checkPageButton.addEventListener('click', function () {

inputBox = document.getElementById("postcodeInput").value

console.log(inputBox)

let xml = new XMLHttpRequest();
xml.open('get', "https://api.getaddress.io/find/" + inputBox + "/?api-key=SECRET&expand=true", false);
xml.send(null);
var data = xml
var arr = xml.responseText
var data = JSON.parse(arr)
var postcode = data.postcode
var addresses = data.addresses

console.log(addresses)
document.getElementById("postcode").innerHTML = postcode;

var text = "";
var i;
for (i = 0; i < addresses.length; i++) {
text += "<div id='addressClick' name=" + i + ">" + addresses[i].line_1 + "</div>" + "<br>";
}
document.getElementById("data").innerHTML = text;

clickFunc()
}, false);
}, false);

function clickFunc() {
var rowBox = document.getElementById("addressClick");

rowBox.addEventListener('click', function () {
console.log('asd');
}, true);
}

HTML

<!doctype html>
<html>

<head>
<title>Address Search</title>
<script src="popup.js"></script>
</head>

<body>
<h3>Address Search</h3>
<input type="text" id='postcodeInput' name="postcodeInput" value="KW1 4YT">
<button id="checkPage">Search</button>
<div class='results'>
<h3>Results - <span id='postcode'></span></h3>
<p id='data'></p>
</div>
</body>

</html>

<style>
body {
width: 200px
}

#addressClick:hover {
color: blue;
cursor: pointer
}
</style>

最佳答案

您可以将一个 EventListener 附加到所有主体,并在每次单击时检测单击的元素是否是所需的元素:

document.body.addEventListener('click', event => window.alert(event.target.innerText)); 

这听起来像是一个激进的解决方案,但它的侵入性比 MutationObserver

关于javascript - 在 DOM 之后加载新元素后检测点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59172454/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com