有人帮我如何将函数绑定到dom异步

Question

1. 我的第一个js文件内容：

   (function(){
       var html = '<div class="wrapper"><a class="test">111</a></div>'
       var app = document.getElementById('app');
       setTimeout(function(){
               app.innerHTML = html;
       },10)
   })()

2. 我的secondjs文件内容：

   var app = document.getElementById('app');
   app.addEventListener('click',function(e){
       console.log(e.target);
       e.target.addEventListener('click',function(){
           alert(111)
       })
   });

3. DOM： <div id="app"></div>

问题是如何在没有事件委托的情况下通过javascript将函数与dom'test'绑定。我的英语不是很好，希望你能理解并帮助我解决这个问题。

Answer 1

一个老派的解决方案是直接在你的onclick标签上设置a处理程序。

(function(){
    var html = '<div class="wrapper"><a onclick="testClicked(event)" class="test">111</a></div>'
    var app = document.getElementById('app');
    setTimeout(function(){
            app.innerHTML = html;
    },10)
})()
function testClicked(e){
  alert(111);
}

<div id= 'app'></div>

Answer 2

不要使用setTimeout来修复异步加载问题。 HTML5解析是异步的，并且调用setTimeout回调的时间可能是不可预测的。 DomContentLoaded事件允许您在文档按照指定的顺序准备好时执行代码：

document.addEventListener("DOMContentLoaded", function(){
    var html = '<div class="wrapper"><a class="test">111</a></div>'
    var app = document.getElementById('app');
    app.innerHTML = html;
});

请注意，匿名函数不会立即使用IIFE调用，而是被称为事件处理程序。添加到同一节点的监听器按添加顺序执行。如果第二个脚本始终在第一个脚本之后同步加载，则可以在第二个文件中添加第二个事件侦听器以查找.test元素并向其添加单击处理程序：

document.addEventListener("DOMContentLoaded", function() {
    var app = document.getElementById('app');
    app.querySelector("a.test").addEventListener('click',function(e){
         alert(111);
    });
});

这种方法是一个例子，并假设问题中提供的JavaScript文件结构最适合应用程序 - 总会有其他方法来做同样的事情。

---

Run this snippet for a demonstration (does not use external script files):

<script>
  document.addEventListener("DOMContentLoaded", function(){
    var html = '<div class="wrapper"><a class="test">111</a></div>'
    var app = document.getElementById('app');
    app.innerHTML = html;
});
</script>
<div id="app"></div>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    var app = document.getElementById('app');
    app.querySelector("a.test").addEventListener('click',function(e){
         alert(111);
    });
  });
</script>