Question

在这个页面中有一个方法 dynamic add html (textbox,input button and radio elements with javascript

我的问题是如何向按钮添加事件，想象我只想创建按钮，而不是文本框或无线电元素。

更新
我在这里遇到问题......我已经尝试了一些提供的解决方案，但它给我带来了问题，让我试着解释......

我试图打开xml文件，读取它并创建具有xml属性的html对象，到目前为止一直这么好，但是如果我尝试添加事件，xmlObj会出现null任何ideias吗？

我有这个...

script = "function OnClientDragEnd(dock, args)" + 
                         "   {" + 
                                "var hidd = document.getElementById('" + HiddenField1.Value + "');" + 
                                "hidd.value = dock.get_id();" + 
                    //"alert(hidd.value);" + 
                                "var xmlDoc = new ActiveXObject('Microsoft.XMLDOM');" + 
                                "xmlDoc.async = 'false';" + 
                                "xmlDoc.load('Config.xml');" + 
                                "xmlObj = xmlDoc.documentElement;" + 
                                "if (xmlObj.childNodes.length>0)" + 
                                "{" + 
                                "   for (var i = 0; i < xmlObj.childNodes.length; i++)" + 
                                "   {" + 
                                "       if (xmlObj.childNodes(i).getElementsByTagName('Id')[0].text == hidd.value){" + 
                                "           var txtTb2 = document.getElementById('" + TextBox4.ClientID + "');" + 
                                "           txtTb2.value = xmlObj.childNodes(i).getElementsByTagName('Titulo')[0].text;" + 
                                "           y = xmlObj.childNodes(i).getElementsByTagName('Titulo')[0].nextSibling;" + 
                                "           yy = xmlObj.childNodes(i).getElementsByTagName('Titulo')[0].previousSibling;" + 
                    //"           alert(y.nodeName);" + 
                                "           for(i=0;i<yy.text;i++){" + 
                                "               alert('aa');" + 
                                "               var tbox = document.createElement('input');" + 
                                "               tbox.setAttribute('type', 'text');" + 
                                "               tbox.setAttribute('value', y.text);" + 
                                "               tbox.setAttribute('name', 'name');" + 
                                "               var abcd = document.getElementById('spanObjDock');" + 
                                "               abcd.appendChild(tbox);" + 
                                "               var bt1 = document.createElement('input');" + 
                                "               bt1.setAttribute('name', 'mais');" + 
                                "               bt1.setAttribute('value', '+');" + 
                                "               bt1.setAttribute('type', 'button');" + 
                                "               bt1.onclick = function (){alert('Clicked!');};" + //--> this dont work 
                                //"               bt1.setAttribute('Click','addRadioButton()');" + //--> and this dont work 
                                "               abcd.appendChild(bt1);" + 
                                "               var bt2 = document.createElement('input');" + 
                                "               bt2.setAttribute('name', 'menos');" + 
                                "               bt2.setAttribute('value', '-');" + 
                                "               bt2.setAttribute('type', 'button');" + 
                                "               abcd.appendChild(bt2);" + 
                                "               var break1 = document.createElement('br');" + 
                                "               abcd.appendChild(break1);" + 
                                "               node = y;" + 
                                "               y=y.nextSibling;" + 
                                "           }" + 
                                "           break;    " +//<input type="button" onclick="" name"as" /> 
                                "       }" + 
                                "   }" + 
                                "}" + 
                            "}";//+

Answer 1

简单地说，使用addEventListener方法：

buttonRef.addEventListener("click", function() {
    alert("Blah blah...");
}, false);

（您必须使用Google进行跨浏览器解决方案.IE不支持addEventListener）

buttonRef是对按钮的引用。你怎么能得到这个参考？有很多方法可以做到这一点。您可以使用document.getElementById()或此“家庭”中的任何其他方法。

Answer 2

var element = document.createElement("input");
element.onclick = function() {alert('Clicked!');};

Answer 3

最简单的跨浏览器方式可能是将事件名称设置为元素的属性：

Element.onclick = function () 
{
   // do something...
}
Element.onmouseup = function () 
{
   // do something else...
}

Answer 4

创建DOM元素时必须附加新事件。

例如：

var e = document.createElement('input');
e.onclick = function()
            {
               alert('Test');
            };

使用javascript将事件添加到按钮

4 个答案: