将事件附加到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);

---

您可以执行类似的操作：

// 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'）
});
}

名称
您必须在插入元素后附加事件，就像您不在
文档上附加全局事件，而是在插入的元素上附加特定事件一样

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.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})

这里有一篇关于事件委派的文章
这是由于元素是动态创建的。您应该使用来处理事件

 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及以上版本

浏览器支持

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（）

库使用该方法根据给定的选择器测试目标元素。触发事件时，仅当目标元素与给定的选择器匹配时才会调用回调。
我创建了一个小库来帮助实现这一点：


//任何'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（'if
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);