为使用节点appendChild添加的列表创建一个evenlistener [英] creating an evenlistener for a list which was added using a node appendChild
问题描述
我试图动态添加一个选择列表到我的html。我已经成功地通过向dom添加节点来完成此操作。我的问题是在一个单独的JavaScript文件我想创建一个eventlistner，它可以识别新创建的选择列表。
HTML代码可以正常工作，但JavaScript eventlistner无法识别对列表所做的更改。
用于Chrome扩展弹出屏幕
HTML
< ;! DOCTYPE html>
< HTML>
< HEAD>
< TITLE>弹出< / TITLE>
< script src =library.js>< / script>
< SCRIPT>
function change（）{
var theDiv = document.getElementById（dropDownList）;
var select = document.createElement（'select'）;
select.name ='scrapbookID';
select.id ='scrapbookID';
select.innerHTML =< option value ='15'> one< / option>+
< option value ='18'> two< / option>+
< option value ='20'>三< / option>+
< option value ='21'> four< / option>;
theDiv.appendChild（select）;
}
< / SCRIPT>
< / HEAD>
< BODY>
< DIV id =signout>您目前已登录。< BR>
< A id =signOutPHPhref =file：/// C：/Users/Kevin/AppData/Local/Temp/non19B.htm#>注销< / A>
< DIV id =dropDownList>
< BUTTON onclick =change（）>添加列表< / BUTTON>
< / DIV>
< / DIV>
< / BODY>
< / HTML>
JAVASCRIPT
document.addEventListener（'DOMContentLoaded'，function（）{
document.getElementById（scrapbookID）。addEventListener（'click'，function（）{
console.log（.. .HElLoooooooosdvsdpovsdvni）;
}）;
}）;
将事件处理程序添加到父< div /> 并检查 event.target 为添加的元素
document.getElementById（dropDownList）。addEventListener（click，function（ev）{
if（ev.target.id ===scrapbookID）{
console.log（... HElLoooooooosdvsdpovsdvni）;
}
}，false）;
I'm trying to add a select list dynamically to my html. I've done this successfully by adding a node to the dom. My problem is on a separate javascript file I want to create an eventlistner which recognises the the newly created select list.
The HTML code works fine but the javascript eventlistner is not recognising changes being made to the list.
This is for a chrome extension popup screen
HTML
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> Pop Up </TITLE>
<script src="library.js"></script>
<SCRIPT>
function change(){
var theDiv = document.getElementById("dropDownList");
var select = document.createElement('select');
select.name = 'scrapbookID';
select.id = 'scrapbookID';
select.innerHTML = "<option value='15'>one</option>"+
"<option value='18'>two</option>"+
"<option value='20'>three</option>"+
"<option value='21'>four</option>";
theDiv.appendChild(select);
}
</SCRIPT>
</HEAD>
<BODY>
<DIV id="signout"> Your are Currently signed in.<BR>
<A id="signOutPHP" href="file:///C:/Users/Kevin/AppData/Local/Temp/non19B.htm#">Sign Out</A>
<DIV id="dropDownList">
<BUTTON onclick="change()">Add List</BUTTON>
</DIV>
</DIV>
</BODY>
</HTML>
JAVASCRIPT
document.addEventListener('DOMContentLoaded', function (){
document.getElementById("scrapbookID").addEventListener('click', function(){
console.log(" ...HElLoooooooosdvsdpovsdvni");
});
});
Add the event handler to the parent <div /> and check event.target for the added element
document.getElementById("dropDownList").addEventListener("click", function(ev) {
if (ev.target.id === "scrapbookID") {
console.log(" ...HElLoooooooosdvsdpovsdvni");
}
}, false);
这篇关于为使用节点appendChild添加的列表创建一个evenlistener的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
