元素 innerHTML 摆脱了事件监听器

Element innerHTML getting rid of event listeners(元素 innerHTML 摆脱了事件监听器)

问题描述

我有一个向页面添加按钮的功能.

I have a function for adding buttons to a page.

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 中创建一个按钮.

It basically creates a button into the html based off some data.

每次我添加一个按钮时，我都希望将它添加到 div #mydiv 的开头，并且由于 newbutton 也不是 Element，而是String，我要修改innerHtml，将其添加到#mydiv的开头.

Every time I add a button, I would like it to be added to the start of div #mydiv, and since newbutton is also not an Element, but a String, I have to modify the innerHtml to add it to the start of #mydiv.

之后，我必须通过获取 #mydiv 的第一个子元素来获取元素(以添加 onclick).

Afterwards, I must get the element (to add an onclick), by getting the first child of #mydiv.

但是，在向我的页面添加第二个按钮后，第一个按钮 onclick 不再起作用.

However, after adding a second button to my page, the first button onclick no longer works.

如果我修改我的代码只添加一个按钮，一切正常.

If I modify my code to only add one button, everything works fine.

所以现在只能点击顶部按钮(最新添加的按钮).

So now, only the top button (the latest added button), can be clicked.

我该如何解决这个问题?

How can I fix this?

我也尝试过使用 element.firstChild 而不是 element.children[0].

I've also tried to use element.firstChild instead of element.children[0].

提前谢谢大家！

这是一个 jsfiddle:(如您所见，唯一有效的按钮是 stackoverflow)

Here is a jsfiddle: ( as you can see the only button that works is stackoverflow )

https://jsfiddle.net/7c7gtL26/

推荐答案

看来你误会了问题.问题是您正在覆盖 innerHTML 以插入内容.

It seems you misunderstood the problem. The problem is that you are overwriting innerHTML in order to insert contents.

切勿使用 innerHTML 插入内容.它将删除所有内部数据，例如事件侦听器.这就是这里发生的事情.

Never use innerHTML to insert contents. It will remove all the internal data, like event listeners. This is what happens here.

如果你想添加一些 HTML 字符串，使用 insertAdjacentHTML:

If you want to prepend some HTML string, use 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>

这篇关于元素 innerHTML 摆脱了事件监听器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！