Inyectar HTML con Javascript

Question

Tengo para inyectar la siguiente línea de HTML a un documento a través de javascript:

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

Además de esto, tengo que registrar una onclick al botón donde la función que se invoca espera una Arg dicen 'arg' por lo que el Javascript es como la siguiente:

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

¿Cómo lograr esto? Una solución obvia es asignar una identificación para el botón y luego registrar una función de clic más adelante una vez que el HTML se anexa al documento. Pero yo no quiero hacer esto porque hay demasiados botones. ¿Hay otra opción que se pueda imaginar.

Adición: El nombre de la función es dinámica, y la 'arg' que va en también es dinámico. Una identificación en todo caso se requiere tiene que ser autogenerado.

**

  

Tengo la solución, por favor ver más abajo

**

Answer 1

Ive consiguió la solución: -

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

Answer 2

Yo recomendaría jQuery.

Algo así como

<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

Se debe evitar el uso onclick como un atributo HTML. En su lugar, crear el botón de programación a través de la interfaz DOM y adjuntar el evento como una propiedad.

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 la forma en jQuery, ya que es donde va el carro de la banda:

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

Además, dado que no necesita configurar el controlador de onclick como una cadena, que no se necesita para convertir su función argumento data a una cadena JSON, lo que mejorará el rendimiento.

Answer 4

puede utilizar document.write para esa variable. var html = document.write ( '' + btnName + ''). Por favor, corrija las comillas simples y dobles. No sé lo que es útil para usted o no

Answer 5

Si usted no desea unirse a un evento para cada botón individual, puede enlazar un evento a un padre de todos esos botones (por ejemplo, el div matriz que tenga los botones, por ejemplo), y luego usar la propagación de eventos para lograr un parecido efecto.

por ejemplo.

<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>

Otra forma de hacerlo es utilizar jQuery eventos - que están haciendo esencialmente lo he escrito más arriba (más elegante, por supuesto). En cuanto a los argumentos, ¿cómo obtener los argumentos en el primer lugar? sin saber que, de verdad que no puedo decir el mejor camino a seguir.

Answer 6

Dado que usted no desea asignar un método onclick las maneras habituales, una manera indirecta sería tener a todos ellos llama a una función con un número de identificación único. La función tendrá una matriz bidimensional que tiene el argumento, esto es suponiendo cada botón se activa la misma función con un parámetro diferente.

Editar que puede haber entendido mal, he aquí algo de código no utilizando jQuery que he utilizado en un proyecto reciente

.

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*/};
        }

El código añade un evento de clic a cinco objetos, y ya que comprueba qué método funciona en el navegador actual, es compatible con los principales navegadores (por lo que he probado).

Saqué algo de código para facilitar la lectura pero eso fue sólo el código de las funciones que serían llamados.