在JavaScript中使用单击事件创建动态按钮 [英] Creating Dynamic button with click event in JavaScript

问题描述

我试过这个，但是当我点击添加按钮时，一条警告消息就显示出来了！

如何使用JavaScript创建带有点击事件的动态按钮？这不是我想要的 - 我希望能够点击动态创建的按钮。

 < script language =的javascript> 
函数add（type）{
 //动态创建一个输入类型。 
 var element = document.createElement（input）; 
 //为元素分配不同的属性。 
 element.setAttribute（type，type）; 
 element.setAttribute（value，type）; 
 element.setAttribute（name，type）; 
 element.setAttribute（onclick，alert（blabla））; 
 
 var foo = document.getElementById（fooBar）; 
 //追加页面中的元素（跨度）。 
 foo.appendChild（element）; 
 
} 
< / script> 
  

解决方案

编辑评论：

function add（type）{//创建一个输入动态键入。 var element = document.createElement（input）; //为元素分配不同的属性。 element.type = type; element.value = type; //真的吗？你希望默认值是字符串类型？ element.name = type; //这个名字呢？ element.onclick = function（）{//注意这是一个函数alert（blabla）; }; var foo = document.getElementById（fooBar）; //追加页面中的元素（跨度）。 onclick = function（）{add（text）;};

 < input type =buttonid =btnAddvalue =添加文本字段>< p id =fooBar >字段：< / p>  

设置元素的 onclick 属性（称为DOM0事件处理），您可以考虑使用 addEventListener （在大多数浏览器上）或< a href =http://msdn.microsoft.com/en-us/library/ms536343%28v=vs.85%29.aspx =noreferrer> attachEvent



---

与上述不同：您可以考虑使用一个好的JavaScript库，如 jQuery ， Prototype ， YUI ， Closure 或其他人。它们可以平滑浏览器之间的差异，如 addEventListener / attachEvent ，提供有用的实用功能以及其他各种功能。显然，没有任何一个图书馆可以做的事情，你不能没有一个，因为图书馆只是JavaScript代码。但是，当你使用一个拥有广泛用户基础的优秀图书馆时，你可以从其他处理这些浏览器差异的人已经完成的大量工作中受益。

How can I create a dynamic button with a click event with 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>

解决方案

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 onclick property 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.

---

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 / attachEvent thing, 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 huge amount of work already done by other people dealing with those browsers differences, etc.

这篇关于在JavaScript中使用单击事件创建动态按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！