给动态添加的按钮添加onclick事件处理程序？

Question

我正在动态地向HTML中添加一个按钮，如下所示。

当点击该按钮时，我想调用一个JavaScript函数。

var but = document.createElement("button");

but.value="delete row";

but.setAttribute("onclick","callJavaScriptFunction()");
// this is not working

but.onclick="callJavaScriptFunction()"
// this is also not working

document.getElementById("but").onclick="callJavaScriptFunction()"
// this is also not working

but.id="but"+inc;

这个问题如何解决？

- sanjeev

Answer 1

试试这个：

but.onclick = callJavascriptFunction;

或者通过使用另一个元素包裹按钮并使用innerHTML创建它：

var span = document.createElement('span');
span.innerHTML = '<button id="but' + inc +'" onclick="callJavascriptFunction()" />';

- jerjer

---

兄弟，一切都好。但是我无法通过连接字符串来提供ID：但是和inc...请帮忙...... "but' + inc +'" 这个不起作用。 - sanjeev

尝试：在span.innerHTML之后，使用span.firstChild.setAttribute("but" + inc)。我假设inc是一个变量，并且必须在使用之前设置。如果仍然无法正常工作，请告诉我。 - jerjer

如何向callJavascriptFunction()添加参数，例如callJavascriptFunction(p1,p2,p3)。 - Rahul Matte

它能工作，但是为什么！btn.onclick = function_name();和btn.onclick = function_name之间有什么区别？ - Dman Cannon

Answer 2

从不起作用的表达式中移除()，将得到所需的结果。

but.setAttribute("onclick",callJavascriptFunction);
but.onclick= callJavascriptFunction;
document.getElementById("but").onclick=callJavascriptFunction;

- Brett Walker

---

为什么要使用setAttribute，当你也可以使用onclick呢？难道不是所有的浏览器都支持onclick吗？ - TJHeuvel

谢谢，那刚好帮了我一个忙！ - Brian Stallter

当向函数传递参数时，如何调用函数。 - livemaker

Answer 3

这段代码对我来说很好用，而且看起来更简单。需要调用一个带有特定参数的函数。

var btn = document.createElement("BUTTON");  //<button> element
var t = document.createTextNode("MyButton"); // Create a text node
btn.appendChild(t);   

btn.onclick = function(){myFunction(myparameter)};  
document.getElementById("myView").appendChild(btn);//to show on myView

- user5276278

Answer 4

尝试一下
but.addEventListener('click', yourFunction) 请注意在函数名后面没有括号()。这是因为你正在赋值函数，而不是调用它。

- Nivas

Answer 5

but.onclick = function() { yourjavascriptfunction();};

或者

but.onclick = function() { 带参数的函数(param);};

- kennydelacruz

---

使用内联事件的一个显著缺点是，与上述事件监听器不同，您只能分配一个内联事件。内联事件存储为元素的属性/属性[doc]，这意味着它可以被覆盖。(https://dev59.com/qGw15IYBdhLWcg3w3vle#6348597) - polkovnikov.ph

Answer 6

我遇到了类似的问题，但这些解决方法都没有奏效。问题出在我的按钮还没有出现在页面上。最终的解决方法是从如下：

//Bad code.
var btn = document.createElement('button');
btn.onClick = function() {  console.log("hey");  }

转换为：

//Working Code.  I don't like it, but it works. 
var btn = document.createElement('button');
var wrapper = document.createElement('div');
wrapper.appendChild(btn);

document.body.appendChild(wrapper);
var buttons = wrapper.getElementsByTagName("BUTTON");
buttons[0].onclick = function(){  console.log("hey");  }

我完全不知道为什么这样能行。将按钮添加到页面并以其他方式引用它都没有起作用。

- Seph Reed

---

我很久以前写了这个答案，但现在不再推荐使用它。相反，可以使用btn.addEventListener('click', function(event){ do stuff });。 - Seph Reed

Answer 7

试试这个：

var inputTag = document.createElement("div");              
inputTag.innerHTML = "<input type = 'button' value = 'oooh' onClick = 'your_function_name()'>";    
document.body.appendChild(inputTag);

这会在 DIV 中创建一个按钮，完美运作！

- hiTman

Answer 8

but.onclick = callJavascriptFunction;

没有引号也没有括号。

- nobody

---

如果你需要参数呢？ - Alex

Answer 9

使用现代JavaScript，这个解决方案效果很好：

let btn = document.getElementById("btnID");
btn.onclick = () => {onAction(url, method);};

- fullonic

Answer 10

对我来说这个有效！

button.onclick = () => (removechore());

- Random Coding

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community