Iniettare html utilizzando Javascript

Question

devo iniettare la seguente riga di codice HTML a un documento tramite javascript:

<button type='button'>btnName </button>

In aggiunta a questo, devo registrare un onclick al pulsante in cui la funzione da richiamare si aspetta un ARG dicono 'arg' in modo che il javascript simile a questa:

var html = "<button type='button' onclick='+ fnName +
    "(the param shld go here)'>" + btnName + "</button>"

Come faccio a raggiungere questo obiettivo? Una soluzione ovvia è di assegnare un ID al pulsante e quindi registrare la funzione di clic più tardi quando il html viene aggiunto al documento. Ma non voglio fare questo perché ci sono troppi pulsanti. C'è un'altra opzione che si può pensare.

Aggiunta: Il nome della funzione è dinamica, e la 'arg' che va a è anche dinamica. Un ID se non del tutto è necessario deve essere generata automaticamente.

**

  

Io ho la soluzione, vedere qui sotto

**

Answer 1

Ive ha ottenuto la soluzione: -

var html = "<button type='button' onclick='"+ fnName +"("+ JSON.stringify(data) +")'>"+ btnName + "</button>"

Answer 2

mi sento di raccomandare jquery.

Qualcosa di simile

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script>
$(document).append(
  $("input")
  .attr("type", "button")
  .click(function(){
    doSomething()
  ))
);
</script>

Answer 3

Si dovrebbe evitare di utilizzare onclick come attributo HTML. Creare invece il pulsante di programmazione tramite l'interfaccia DOM e collegare l'evento come una proprietà.

var button       = document.createElement("button");
button.type      = "button";
button.innerHTML = btnName;
button.onclick   = function() {
    window[fnName](data);
};

// Insert the button into whatever container node you are populating
someContainerNode.appendChild(button);

O il modo in jQuery in quanto è lì che il carro band sta andando:

$("<button type='button'>" + btnName + "</button>").click(function() {
    window[fnName](data);
}).appendTo(someContainerNode);

Inoltre, dal momento che non sta impostando il gestore onclick come una stringa, non sarà necessario convertire la vostra funzione argomento data in una stringa JSON, che permetterà di migliorare le prestazioni.

Answer 4

è possibile utilizzare document.write per quella variabile. var html = document.write ( '' + btnName + ''). Si prega di correggere le virgolette singole e doppie. Non so questo è utile per voi o no

Answer 5

se non volete associare un evento per ogni singolo pulsante, è possibile associare un evento ad un genitore di tutti quei tasti (ad esempio, il div madre che detiene i pulsanti per esempio), e quindi utilizzare bubbling degli eventi per ottenere un simile effetto.

per es.

<div id="parent">   
   <button id="b0">text</button>
   <button id="b1">text</button>
   <button id="b2">text</button>
   <button id="b3">text</button>
   <button id="b4">text</button>
   <button id="b5">text</button>
</div>
<script>
   $("#parent").click(function(e){
       if ($(e.target).attr("id") === "b0") {
          // do b0's stuff
       } else if ($(e.target).attr("id") === "b1") {
          //do b1's stuff 
       } //etc 
   });
</script>

Un altro modo per farlo è quello di utilizzare jquery eventi live - sono essenzialmente facendo quello che ho scritto sopra (più elegantemente, ovviamente). Per quanto riguarda gli argomenti, come si fa a ottenere gli argomenti in primo luogo? senza sapere che, non posso davvero dirvi il modo migliore di procedere.

Answer 6

Dal momento che non si vuole assegnare un metodo onclick modi consueti, una rotonda modo sarebbe quello di averli tutti chiamano una funzione con un numero di identificazione unico. La funzione avrà una matrice bidimensionale che ha l'argomento, questo assume ogni pulsante chiama la stessa funzione con un parametro differente.

Modifica Forse ho capito male, qui è un codice non utilizzando jQuery che ho usato in un recente progetto

.

for(var place = 0; place < 5; place++)
        {
            if(document.getElementById('title_'+ place).addEventListener)//this is for compatablity
                document.getElementById('title_'+ place).addEventListener('click', function(e){/*some code*/});
            else if(document.getElementById('title_'+ place).attachEvent)
                document.getElementById('title_'+ place).attachEvent('onclick',  function(e){/*some code*/});
            else
                document.getElementById('title_'+ place) = function(e){/*some code*/};
        }

Il codice aggiunge un evento onClick per cinque oggetti, e dal momento che controlla quale metodo funziona nel browser corrente, supporta i principali browser (per quanto ho provato).

Ho tirato fuori qualche codice per migliorare la leggibilità, ma che era solo il codice nelle funzioni che sarebbero chiamati.