Question

我正在尝试创建一个简单的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>

Answer 1

您可以在整个身体上附加EventListener，并在每次单击时检测单击的元素是否为所需元素：

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

这听起来像是一个激进的解决方案，但是它比MutationObserver

更具侵入性

在DOM

1 个答案: