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

我试图动态地将html数据插入到动态创建的列表中，但是当我尝试为动态创建的事件的按钮附加onclick事件时未触发。解决方案将非常感激。将事件附加到javascript中的动态元素

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

}）;

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>

来源

2016-01-20 Manju

你如何创建HTML的文章？ – jim0thy

我会说它是因为当你尝试附加事件监听器时，元素不存在。 - 看看这个https://learn.jquery.com/events/event-delegation/ – Craicerjack

移动你的addEventListener到btnSubmit的事件监听器 – slebetman

这是由于你的元素是动态创建的，你应该event delegation处理事件。

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

的jQuery使它更容易：

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

这里是你可以阅读有关事件代表团event delegation article

来源

2016-01-20 09:38:54 jilykate

谢谢！有时纯JS解决方案在iphone上不起作用，但是如果在另一个父div上更改文档，例如，它可以工作。委派的最佳解决方案是什么？ – Kholiavko

@Kholiavko我会说只要“父”元素不是动态创建的，它应该工作。我会将事件处理程序绑定到动态创建d元素的第一个父元素，以便在不同事件处理程序之间没有冲突 – jilykate

但是有时它不适用于iphone，即使“parent”元素不是动态创建的。这里是[exapmle]（https://codepen.io/kholiavko-roman/pen/WjMyMj），它适用于所有浏览器，但不适用于iphone（safary和chrome）。我不明白为什么。 – Kholiavko

你可以做一些类似这样：

// 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);

来源

2016-01-20 09:34:00 PRDeving

您需要创建的元素之后对事件重视。像：

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

 
    }); 
 
});

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

来源

2016-01-20 09:35:41 R3tep

伟大的:)它工作完美 – Manju

有一种变通方法通过捕捉document.body点击，然后检查事件的目标。

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

来源

2016-01-20 09:36:06

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

回答

相关问题