时间戳

首页 > 解决方案 > 如何在javascript中单击操作时为DOM中新添加的元素编写回调？

javascript - 如何在javascript中单击操作时为DOM中新添加的元素编写回调？

问题描述

我有一个向 DOM 添加新元素的按钮。现在我想为点击这个新元素编写事件监听器。但不能这样做，因为当页面加载时，这个元素不会在 DOM 中。到目前为止我尝试过的代码是

    const initButton = document.querySelector(".wS .amr .amn .ams");
    initButton.click() // this will add new element in DOM which will be async action

    // now I want to perform following on newly added element
    
    document.querySelector(".fX.aXjCH").setAttribute("style", "display:block");
    document.querySelector(".aB.gQ.pE").click();

我需要一些回调机制，以便在使用新组件更新 DOM 后执行后面的代码。我怎样才能做到这一点？如何确保 DOM 已更新？或者有什么办法可以为第一次点击（）编写回调？

标签： javascriptdom

解决方案

  1. 在结束正文标记之前有脚本标记
  2. 添加readystatechange这样的事件 -
  3. 附加后你可以访问新添加的标记。

注意：如果标记来自数据库，这种使用 in 的附加子级.innerHTML是不安全的，并且可能导致 XSS，除非我们清理str.

<body>
<ul id="ul_o">
<button class='wS amr amn ams'>WS </button>
<div class='container'>

</div>
</ul>
<script type='text/javascript'>
document.onreadystatechange = function () {
  if (document.readyState === "interactive") {
    const initButton = document.querySelector(".wS.amr.amn.ams");
    const container = document.querySelector(".container");

    initButton.addEventListener('click', function(){
      
      var str = '<p>something here</p>';
      var temp = document.createElement('div');
      temp.innerHTML = str;
      container.appendChild(temp);
   const span = document.querySelector("p");
      console.log(span);
    });
  }
}
</script>
</body>

推荐阅读