Javascript injection html

Question

Je dois injecter la ligne suivante de html à un document par javascript:

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

En plus de cela, je dois enregistrer un onclick du bouton où la fonction à appeler attend une arg dire 'arg' de sorte que le javascript ressemble à ceci:

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

Comment puis-je obtenir cela? Une solution évidente consiste à attribuer un ID au bouton, puis enregistrer une fonction de clic plus tard une fois le code HTML est ajouté au document. Mais je ne veux pas faire cela parce qu'il y a trop de boutons. Y at-il une autre option que vous pouvez penser.

Addition: Le nom de la fonction est dynamique et l'argument entré est également dynamique. Un identifiant, s'il est requis, doit être généré automatiquement.

**

Ive a obtenu le soltion, s'il vous plaît voir ci-dessous

**

Answer 1

Ive a obtenu la solution: -

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

Answer 2

Je recommande jquery.

Quelque chose comme

<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

Puisque vous ne voulez pas attribuer une méthode onclick les moyens habituels, une manière détournée serait de les avoir tous appeler une fonction avec un numéro d'identification unique. La fonction aura un tableau bidimensionnel qui a l'argument, ceci suppose que chaque bouton appelle la même fonction avec un paramètre différent.

Edit: j'ai mal compris, voici un code pas en utilisant jQuery que j'ai utilisé dans un projet récent.

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

Le code ajoute un événement onClick à cinq objets, et comme il vérifie la méthode qui fonctionne dans le navigateur actuel, il prend en charge les principaux navigateurs (pour autant que je l'ai testé).

J'ai enlevé du code pour la lisibilité mais c'était juste le code dans les fonctions qui seraient appelées.

Answer 4

Vous pouvez utiliser document.write pour cette variable. var html = document.write ('' + btnName + ''). Veuillez corriger les guillemets simples et doubles. Je ne sais pas cela est utile pour vous ou pas

Answer 5

Si vous ne voulez pas lier un événement à chaque bouton individuel, vous pouvez lier un événement à un parent de tous ces boutons (par exemple, la div parent tenant les boutons par exemple), puis utilisez l'événement bubbling pour obtenir un effet similaire.

par exemple.

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

une autre façon de le faire est d'utiliser jquery live events - ils font essentiellement ce que j'ai écrit ci-dessus (avec plus d'élégance bien sûr). En ce qui concerne les arguments, comment obtenez-vous les arguments en premier lieu?sans le savoir, je ne peux pas vraiment vous dire la meilleure voie à suivre.

Answer 6

Vous devriez éviter d'utiliser onclick comme un attribut HTML. Au lieu de cela, créez le bouton par programmation via l'interface DOM et attachez l'événement en tant que propriété.

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

Ou la manière jQuery puisque c'est où le wagon de bande va:

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

De plus, puisque vous ne définissez pas le gestionnaire onclick comme une chaîne, vous aurez pas besoin de convertir votre argument de fonction data à une chaîne JSON, ce qui améliorera les performances.