元素 innerHTML 摆脱事件监听器
Element innerHTML getting rid of event listeners
我有一个向页面添加按钮的功能。
var count = 0;
function createOnclickFunction(number)
{
return function()
{
alert("This is button number " + number);
}
}
function addButton(data)
{
var newbutton = "..." //creates string from data
var element = document.getElementById("mydiv");
var children = element.children;
element.innerHTML = newbutton + element.innerHTML;
var currentCount = count;
children[0].onclick = createOnclickFunction(currentCount)
count++;
}
它基本上是根据一些数据在 html 中创建一个按钮。
每次添加按钮时,我都希望将其添加到 div #mydiv
的开头,并且由于 newbutton 也不是 Element
,而是 String
,我必须修改 innerHtml 以将其添加到 #mydiv
.
的开头
之后,我必须通过获取 #mydiv
的第一个子元素来获取元素(添加 onclick)。
但是,在我的页面中添加第二个按钮后,第一个按钮的 onclick 不再起作用。
如果我修改我的代码只添加一个按钮,一切正常。
所以现在只能点击顶部按钮(最新添加的按钮)。
我该如何解决这个问题?
我也尝试过使用 element.firstChild
而不是 element.children[0]
。
先谢谢大家了!
编辑:
这是一个 jsfiddle:(如您所见,唯一可用的按钮是 Whosebug
)
看来你误解了问题。问题是您正在覆盖 innerHTML
以插入内容。
切勿使用innerHTML
插入内容。它将删除所有内部数据,如事件监听器。这就是这里发生的事情。
如果要在前面添加一些 HTML 字符串,请使用 insertAdjacentHTML
:
var count = 0;
function createOnclickFunction(number) {
return function() {
alert("This is button number " + number);
}
}
function addButton(data) {
var newbutton = "<button>Click me</button>" //creates string from data
var element = document.getElementById("mydiv");
element.insertAdjacentHTML('afterbegin', newbutton);
var children = element.children;
children[0].onclick = createOnclickFunction(count)
count++;
}
addButton();
addButton();
addButton();
<div id="mydiv"></div>
我有一个向页面添加按钮的功能。
var count = 0;
function createOnclickFunction(number)
{
return function()
{
alert("This is button number " + number);
}
}
function addButton(data)
{
var newbutton = "..." //creates string from data
var element = document.getElementById("mydiv");
var children = element.children;
element.innerHTML = newbutton + element.innerHTML;
var currentCount = count;
children[0].onclick = createOnclickFunction(currentCount)
count++;
}
它基本上是根据一些数据在 html 中创建一个按钮。
每次添加按钮时,我都希望将其添加到 div #mydiv
的开头,并且由于 newbutton 也不是 Element
,而是 String
,我必须修改 innerHtml 以将其添加到 #mydiv
.
之后,我必须通过获取 #mydiv
的第一个子元素来获取元素(添加 onclick)。
但是,在我的页面中添加第二个按钮后,第一个按钮的 onclick 不再起作用。
如果我修改我的代码只添加一个按钮,一切正常。
所以现在只能点击顶部按钮(最新添加的按钮)。
我该如何解决这个问题?
我也尝试过使用 element.firstChild
而不是 element.children[0]
。
先谢谢大家了!
编辑:
这是一个 jsfiddle:(如您所见,唯一可用的按钮是 Whosebug
)
看来你误解了问题。问题是您正在覆盖 innerHTML
以插入内容。
切勿使用innerHTML
插入内容。它将删除所有内部数据,如事件监听器。这就是这里发生的事情。
如果要在前面添加一些 HTML 字符串,请使用 insertAdjacentHTML
:
var count = 0;
function createOnclickFunction(number) {
return function() {
alert("This is button number " + number);
}
}
function addButton(data) {
var newbutton = "<button>Click me</button>" //creates string from data
var element = document.getElementById("mydiv");
element.insertAdjacentHTML('afterbegin', newbutton);
var children = element.children;
children[0].onclick = createOnclickFunction(count)
count++;
}
addButton();
addButton();
addButton();
<div id="mydiv"></div>