2010-02-04 26 views
8

In questa pagina c'è un modo per dynamic add html (textbox,input button and radio elements with javascriptAggiungi l'evento al pulsante con javascript

mia questioon è come posso aggiungere un evento al pulsante, immagino che voglio solo creare il pulsante, non è la casella di testo o la radio elemento.

UPDATE
Sto avendo dei problemi qui ... ho provato alcune delle soluzioni fornite ma mi causa problemi, mi permetta di provare a spiegare ...

nel tentativo di aprire il file xml , leggetelo e create un oggetto html con le proprietà del xml, fin qui tutto bene, ma se provo ad aggiungere l'evento, xmlObj nasconde qualsiasi ideia ??

ho questo ...

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" /> 
           "  }" + 
           " }" + 
           "}" + 
          "}";//+ 

risposta

14

Semplicemente, uso addEventListener metodo:

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

(Dovrai Google per la soluzione cross-browser. IE non supporta addEventListener)

Dove buttonRef è un riferimento al pulsante. Come puoi ottenere questo riferimento? Ci sono molti modi per farlo. È possibile utilizzare document.getElementById() o qualsiasi altro metodo da questa "famiglia".

+0

Funziona! Ho alcune difficoltà, qualsiasi cosa alla fine ho aggiunto, ho ricevuto errore che xmlObj era nullo, ma riavvio VS2008 chiudere alcune finestre e inizia a funzionare. Grazie!! – SlimBoy

+0

Trovato questo collegamento che ha aiutato https://developer.mozilla.org/En/DOM:element.addEventListener – SlimBoy

+0

IE 9 supporta effettivamente 'addEventListener' [ref] (http://stackoverflow.com/questions/6927637/addeventlistener -in-internet-explorer # 6.927.800). – another

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

sfiga! dannazione, bastonami per un secondo ... non avrei dovuto mettere quell'esempio in più! –

+0

In realtà sembra che il timestamp sia esattamente lo stesso per entrambi i nostri post. : D –

3

Probabilmente il modo più semplice cross-browser è quello di impostare il nome dell'evento come una proprietà dell'elemento:

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

È necessario allegare il nuovo evento quando si crea l'elemento DOM.

Ad esempio:

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