将事件附加到javascript中的动态元素

我尝试将html数据动态插入到动态创建的列表中，但当我尝试为动态创建的按钮附加onclick事件时，事件不会触发。我们将非常感谢您的解决方案

Javascript代码：

document.addEventListener('DOMContentLoaded', function () {
   document.getElementById('btnSubmit').addEventListener('click', function () {
        var name = document.getElementById('txtName').value;
        var mobile = document.getElementById('txtMobile').value;
        var html = '<ul>';
        for (i = 0; i < 5; i++) {
            html = html + '<li>' + name + i + '</li>';
        }
        html = html + '</ul>';

        html = html + '<input type="button" value="prepend" id="btnPrepend" />';
        document.getElementsByTagName('form')[0].insertAdjacentHTML('afterend', html);
    });

    document.getElementById('btnPrepend').addEventListener('click', function () {
        var html = '<li>Prepending data</li>';
        document.getElementsByTagName('ul')[0].insertAdjacentHTML('afterbegin', html);
    });
});

document.addEventListener（'DOMContentLoaded'，函数（）{
document.getElementById（'btnSubmit'）。addEventListener（'click'，function（）{
var name=document.getElementById（'txtName'）。值；
var mobile=document.getElementById（'txtMobile'）.value；
var html='
'；
对于（i=0；i<5；i++）{
html=html+'
'+name+i+'
'；
}
html=html+'
'；
html=html+“”；
document.getElementsByTagName（'form'）[0].insertAdjacentHTML（'afterend'，html）；
});
document.getElementById（'btnPrepend'）。addEventListener（'click'，function（）{
var html='
在数据前面加上前缀
'；
document.getElementsByTagName（'ul'）[0].insertAdjacentHTML（'afterbegin'，html）；
});
});

HTML代码：

<form>
    <div class="control">
        <label>Name</label>
        <input id="txtName" name="txtName" type="text" />
    </div>
    <div class="control">
        <label>Mobile</label>
        <input id="txtMobile" type="text" />
    </div>
    <div class="control">
        <input id="btnSubmit" type="button" value="submit" />
    </div>
</form>

名称
可移动的

您可以执行类似的操作：

// Get the parent to attatch the element into
var parent = document.getElementsByTagName("ul")[0];

// Create element with random id
var element = document.createElement("li");
element.id = "li-"+Math.floor(Math.random()*9999);

// Add event listener
element.addEventListener("click", EVENT_FN);

// Add to parent
parent.appendChild(element);

---

您必须在插入元素后附加事件，就像您不在

文档上附加全局事件，而是在插入的元素上附加特定事件一样

e、 g


document.getElementById（'form'）.addEventListener（'submit'，函数（e）{
e、 预防默认值（）；
var name=document.getElementById（'txtName'）。值；
var idElement='btnPrepend'；
变量html=`

${name}

`;
/*将html插入到DOM中*/
insertHTML（'form'，html）；
/*在插入html后添加事件侦听器*/
添加元素（idElement）；
});
const insertHTML=（标记='form'，html，位置='afterend'，索引=0）=>{
document.getElementsByTagName（tag）[index].insertAdjacentHTML（position，html）；
}
常量addEvent=（id，事件='单击'）=>{
document.getElementById（id）.addEventListener（事件，函数（）{
插入TML（'ul'，'li>预编数据，'afterbegin'）
});
}

名称
有一种解决方法，可以捕获对
document.body
的单击，然后检查事件目标

document.body.addEventListener( 'click', function ( event ) {
  if( event.target.id == 'btnSubmit' ) {
    someFunc();
  };
} );

这是由于元素是动态创建的。您应该使用来处理事件

 document.addEventListener('click',function(e){
    if(e.target && e.target.id== 'brnPrepend'){
          //do something
     }
 });

jquery让它变得更简单：

 $(document).on('click','#btnPrepend',function(){//do something})

下面是一篇关于事件委托的文章

浏览器支持

chrome-4.0、Edge-9.0、Firefox-3.5 Safari-3.2、Opera-10.0及以上版本
我创建了一个小型库来帮助实现这一点：


//任何'li'或类为'.myClass'的元素都将触发回调，
//甚至在创建事件侦听器之后动态创建的元素。
addDynamicEventListener（document.body，'click'，'.myClass，li'，函数（e）{
log（'Clicked'，e.target.innerText）；
});

该功能类似于jQuery.on（）

库使用该方法根据给定的选择器测试目标元素。当触发事件时，仅当目标元素与给定的选择器匹配时，才会调用回调。
我为此编写了一个简单的函数

\u case
函数不仅可以获取目标，还可以获取绑定事件的父元素

回调函数返回包含目标（
evt.target
）和与选择器匹配的父元素（
this
）的事件。在这里，您可以在单击元素后执行所需的操作

我还没有决定哪个更好，是
if else
还是
开关


var\u case=函数（evt、选择器、cb）{
var _this=evt.target.closest（选择器）；
if（_this&&u this.nodeType）{
cb.呼叫（_this，evt）；
返回true；
}else{return false；}
}
document.getElementById（'ifelse'）。addEventListener（'click'，函数（evt）{
if（_）案例（evt），.parent1'，函数（evt）{
log（'1:'，this，evt.target）；
}))返回false；
if（_）案例（evt），.parent2'，函数（evt）{
log（'2:'，this，evt.target）；
}))返回false；
log（'ifelse:'，this）；
})
document.getElementById（'switch'）。addEventListener（'click'，函数（evt）{
开关（真）{
案例_案例（evt），.parent3'，函数（evt）{
log（'3:'，this，evt.target）；
})：中断；
案例_案例（evt），.parent4'，函数（evt）{
log（'4:'，this，evt.target）；
})：中断；
违约：
log（'switch:'，this）；
打破
}
})
#如果其他{
背景：红色；
高度：100px；
}
#开关{
背景：黄色；
高度：100px；
}

点击我1！
点击我2！
点击我3！
点击我4！
区别在于如何在DOM中创建和附加元素

如果通过
document.createElement
创建元素，请添加事件侦听器，并将其附加到DOM中。你的事件会引起轰动

如果将元素创建为如下字符串：html+=“
test
”`，那么从技术上讲，elment只是一个字符串。字符串不能有事件侦听器

一种解决方案是使用
document.createElement
创建每个元素，然后直接将它们添加到DOM元素中

// Sample
let li = document.createElement('li')
document.querySelector('ul').appendChild(li)

我知道这个主题太老了，但我花了几分钟时间创建了一个非常有用的代码，它可以很好地使用纯
JAVASCRIPT
。
下面是代码和一个简单的示例：


String.prototype.addEventListener=function（eventHandler，functionToDo）{
让选择器=这个；
document.body.addEventListener（eventHandler，函数（e）{
e=（e | | window.event）；
e、 预防默认值（）；
const path=e.path；
path.forEach（函数（elem）{
常量选择器数组=document.querySelectorAll（选择器）；
selectorArray.forEach（函数（slt）{
如果（slt==elem）{
_( document ).on( "click", "#brnPrepend", function( _event, _element ){
      console.log( _event );
      console.log( _element );
      // Todo

  });

<script src="dynamicListener.min.js"></script>
<script>
// Any `li` or element with class `.myClass` will trigger the callback, 
// even elements created dynamically after the event listener was created.
addDynamicEventListener(document.body, 'click', '.myClass, li', function (e) {
    console.log('Clicked', e.target.innerText);
});
</script>

// Sample
let li = document.createElement('li')
document.querySelector('ul').appendChild(li)

function on_window_click(event)
{
    let e = event.target;

    while (e !== null)
    {
        // --- Handle clicks here, e.g. ---
        if (e.getAttribute(`data-say_hello`))
        {
            console.log("Hello, world!");
        }

        e = e.parentElement;
    }
}

window.addEventListener("click", on_window_click);