Question

我正在尝试通过javascript在div标签内动态创建按钮。按钮本身的创建工作正常和花花公子但单击按钮时EventListener似乎没有响应。这是我的代码：

var container = document.getElementById("my-container-div-id");
var newButton = document.createElement("button");
newButton.type = "button";
newButton.innerText = "Button Text";

var handler = function() {
    myFunction(myParam);
};

newButton.addEventListener("click", handler, false);
container.appendChild(newButton);

按钮出来很好但是asigned函数不会被激活，即使是简单的alert（）或console.log（）在单击按钮时也没有响应。

Answer 1

您是否有可能没有正确ID的元素？对我来说很好：

＆＃13;

var container = document.getElementById("my-container-div-id");
var newButton = document.createElement("button");
newButton.type = "button";
newButton.innerText = "Button Text";

var handler = function() {
    alert("woot");
};

newButton.addEventListener("click", handler, false);
container.appendChild(newButton);

＆＃13;

<div id='my-container-div-id'></div>

＆＃13;

Answer 2

您还可以使用 document.querySelector 来获取dom元素

请参阅下面的示例，了解使用事件处理程序创建动态按钮。

＆＃13;

var divEl = document.querySelector('div.btn'),
    btnEl = document.createElement("button"),
    btnHandler = function() {
      alert('Hey you have clicked on me..!');
    };
    
btnEl.innerText="Click me to test...!";
btnEl.addEventListener("click", btnHandler, false);
divEl.appendChild(btnEl);

＆＃13;

<div class="btn"></div>

＆＃13;

Answer 3

怎么样：

newButton.setAttribute("onclick", handler);

Javascript动态按钮addEventListener没有响应

3 个答案: