在 JavaScript 中使用单击事件创建动态按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7707074/
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
Creating Dynamic button with click event in JavaScript
提问by Mustafa Ekici
How can I create a dynamic button with a click event with JavaScript?
如何使用 JavaScript 创建带有单击事件的动态按钮？
I tried this, but when I click the add button, an alert message show up! It's not what I want - I want to be able to click the button which is dynamically created.
我试过了，但是当我单击添加按钮时，会出现一条警告消息！这不是我想要的 - 我希望能够点击动态创建的按钮。
<script language="javascript">
function add(type) {
//Create an input type dynamically.
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute("type", type);
element.setAttribute("value", type);
element.setAttribute("name", type);
element.setAttribute("onclick", alert("blabla"));
var foo = document.getElementById("fooBar");
//Append the element in page (in span).
foo.appendChild(element);
}
</script>
回答by T.J. Crowder
Wow you're close. Edits in comments:
哇，你很接近。评论中的编辑：
function add(type) {
//Create an input type dynamically.
var element = document.createElement("input");
//Assign different attributes to the element.
element.type = type;
element.value = type; // Really? You want the default value to be the type string?
element.name = type; // And the name too?
element.onclick = function() { // Note this is a function
alert("blabla");
};
var foo = document.getElementById("fooBar");
//Append the element in page (in span).
foo.appendChild(element);
}
document.getElementById("btnAdd").onclick = function() {
add("text");
};<input type="button" id="btnAdd" value="Add Text Field">
<p id="fooBar">Fields:</p>Now, instead of setting the onclickproperty of the element, which is called "DOM0 event handling," you might consider using addEventListener(on most browsers) or attachEvent(on all but very recent Microsoft browsers) — you'll have to detect and handle both cases — as that form, called "DOM2 event handling," has more flexibility. But if you don't need multiple handlers and such, the old DOM0 way works fine.
现在，onclick您可以考虑使用addEventListener（在大多数浏览器上）或attachEvent（在除最新的 Microsoft 浏览器之外的所有浏览器上）而不是设置元素的属性（称为“DOM0 事件处理” ）——您必须检测并处理这两种情况— 因为这种称为“DOM2 事件处理”的形式具有更大的灵活性。但是如果您不需要多个处理程序等，旧的 DOM0 方式就可以正常工作。
Separately from the above: You might consider using a good JavaScript library like jQuery, Prototype, YUI, Closure, or any of several others. They smooth over browsers differences like the addEventListener/ attachEventthing, provide useful utility features, and various other things. Obviously there's nothing a library can do that you can't do without one, as the libraries are just JavaScript code. But when you use a good library with a broad user base, you get the benefit of a hugeamount of work already done by other people dealing with those browsers differences, etc.
与上述不同：您可能会考虑使用一个好的 JavaScript 库，如jQuery、Prototype、YUI、Closure或其他几个库中的任何一个。它们消除了浏览器之间的差异，比如addEventListener/attachEvent东西，提供了有用的实用功能，以及其他各种东西。显然，没有什么是库可以做的，没有库就不能做，因为库只是 JavaScript 代码。但是，当你使用一个好的图书馆有广泛的用户基础，你得到的好处巨大已经被其他人处理这些浏览器的差异，等完成的工作数量
回答by shashidhar
<!DOCTYPE html>
<html>
<body>
<p>Click the button to make a BUTTON element with text.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var btn = document.createElement("BUTTON");
var t = document.createTextNode("CLICK ME");
btn.setAttribute("style","color:red;font-size:23px");
btn.appendChild(t);
document.body.appendChild(btn);
btn.setAttribute("onclick", alert("clicked"));
}
</script>
</body>
</html>
回答by neworld
this:
这个：
element.setAttribute("onclick", alert("blabla"));
should be:
应该：
element.onclick = function () {
alert("blabla");
}
Because you call alert instead push alert as string in attribute
因为您调用警报而不是将警报作为属性中的字符串推送
回答by Sam Dufel
Firstly, you need to change this line:
首先，您需要更改此行：
element.setAttribute("onclick", alert("blabla"));
To something like this:
对于这样的事情：
element.setAttribute("onclick", function() { alert("blabla"); });
Secondly, you may have browser compatibility issues when attaching events that way. You might need to use .attachEvent / .addEvent, depending on which browser. I haven't tried manually setting event handlers for a while, but I remember firefox and IE treating them differently.
其次，以这种方式附加事件时，您可能会遇到浏览器兼容性问题。您可能需要使用 .attachEvent / .addEvent，具体取决于浏览器。我有一段时间没有尝试手动设置事件处理程序，但我记得 Firefox 和 IE 对它们的处理方式不同。
