Javascript 将 onclick 事件添加到动态添加的按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6956258/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
adding onclick event to dynamically added button?
提问by sanjeev
I am adding a button dynamically in html like below: On click of that button I want to call a Javascript function:
我在 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;
Are there any ways to resolve this??Plz help me., thanks in advance
有什么办法可以解决这个问题吗？请帮帮我。，提前致谢
回答by jerjer
try this:
尝试这个：
but.onclick = callJavascriptFunction;
or create the button by wrapping it with another element and use innerHTML:
或者通过用另一个元素包裹它并使用innerHTML来创建按钮：
var span = document.createElement('span');
span.innerHTML = '<button id="but' + inc +'" onclick="callJavascriptFunction()" />';
回答by Brett Walker
Remove the () from your expressions that are not working will get the desired results you need.
从无效的表达式中删除 () 将获得所需的结果。
but.setAttribute("onclick",callJavascriptFunction);
but.onclick= callJavascriptFunction;
document.getElementById("but").onclick=callJavascriptFunction;
回答by Nivas
Trybut.addEventListener('click', yourFunction)Note the absenceof parantheses ()after the function name. This is because you are assigning the function, not calling it.
请but.addEventListener('click', yourFunction)注意函数名称后没有括号()。这是因为您正在分配函数，而不是调用它。
回答by Seph Reed
I was having a similar issue but none of these fixes worked. The problem was that my button was not yet on the page. The fix for this ended up being going from this:
我遇到了类似的问题，但这些修复都没有奏效。问题是我的按钮还没有出现在页面上。对此的修复最终是从这里开始的：
//Bad code.
var btn = document.createElement('button');
btn.onClick = function() { console.log("hey"); }
to this:
对此：
//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"); }
I have no clue at all why this works. Adding the button to the page and referring to it any other way did not work.
我完全不知道为什么会这样。将按钮添加到页面并以任何其他方式引用它都不起作用。
回答by user5276278
This code work good to me and look more simple. Necessary to call a function with specific parameter.
这段代码对我很好，看起来更简单。需要调用具有特定参数的函数。
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
回答by kennydelacruz
but.onclick = function() { yourjavascriptfunction();};
but.onclick = function() { yourjavascriptfunction();};
or
或者
but.onclick = function() { functionwithparam(param);};
but.onclick = function() { functionwithparam(param);};
回答by hiTman
Try this:
尝试这个：
var inputTag = document.createElement("div");
inputTag.innerHTML = "<input type = 'button' value = 'oooh' onClick = 'your_function_name()'>";
document.body.appendChild(inputTag);
This creates a button inside a DIV which works perfectly!
这将在 DIV 中创建一个完美运行的按钮！
回答by nobody
but.onclick = callJavascriptFunction;
no double quotes no parentheses.
没有双引号没有括号。
