添加onclick事件动态添加按钮？

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

有没有办法解决这个问题?Plz帮帮我。,提前谢谢

8 个解决方案

#1

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()" />';

#2

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;

#3

Try
but.addEventListener('click', yourFunction) Note the absence of parantheses () after the function name. This is because you are assigning the function, not calling it.

尝试使用but.addEventListener('click',yourFunction)注意函数名后面没有parantheses()。这是因为您正在分配该功能,而不是调用它。

#4

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.

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

#5

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内部创建一个完美的按钮!

#6

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

#7

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

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

but.onclick = function() { functionwithparam(param);};

but.onclick = function(){functionwithparam(param);};

#8

but.onclick = callJavascriptFunction;

no double quotes no parentheses.

没有双引号没有括号。

#1