Je reçois NaN lorsque je tente d'insérer du code HTML dans un élément DIV avec jQuery

Question

Je suis Tring pour afficher une zone de texte lorsqu'un élément de classe numObj est cliqué. Pour une raison quelconque, je reçois NaNNaNaNaNNaNNaNaNaN où je pense à voir le résultat de la variable searchForm dans le code ci-dessous.

Je sais que NaN signifie pas un numéro. Ce que je ne comprends pas pourquoi Javascript attend un certain nombre? Je ne comprends pas pourquoi il prend soin.

$(".numObj").live('click',function(){
   var preId = $(this).attr('preId');
   var arrayPos = $(this).attr('numArrayPos');

        alert(preId +" "+arrayPos);

        var searchForm = "<table border='0' cellspacing='0' cellpadding='4' id='add-tag2'>"+
          +"<tr class='normal'><td bgcolor='#EEEEEE' valign='bottom' nowrap='nowrap'><span class='normal-small'>"+
          +"<input name='predicate-name2' type='text' class='normal' id='predicate-name2' size='4' />"+
          +"</span></td>"+
          +"<td bgcolor='#EEEEEE' valign='bottom' nowrap='nowrap'><span class='normal-small'>&lt;=</span></td>"+
          +"<td bgcolor='#EEEEEE' valign='bottom' nowrap='nowrap'>x</td>"+
          +"<td valign='bottom' bgcolor='#EEEEEE'>&lt;=</td>"+
          +"<td valign='bottom' bgcolor='#EEEEEE'><span class='normal-small'>"+
          +"<input type='text' name='object-object2' id='object-object2' class='normal' size='4' />"+
          +"</span></td>"+
          +"</tr>"+
          +"</table>";
        $(".numObj").filter("[preId='"+preId+"']").filter("[numArrayPos='"+arrayPos+"']").html(searchForm);

    }); 

Le code généré qui a la classe numObj ressemble à quelque chose comme ceci

<td><div class="numObj" preid="73" numarraypos="5"><span class="normal">585.0</span></div></td>

Answer 1

Le problème, comme d'autres l'ont souligné est l'opérateur +. Mis à part les chaînes concaténer, il est également utilisé comme plus mathématique. En raison du typage dynamique Javascript, l'utilisation de + unaire seul sur une chaîne entraînera la chaîne à convertir en un certain nombre:

+"12"; // -> 12
+"10" + +"12" // -> 22

Plusieurs lignes de code ont l'opérateur + à la fin de la ligne et le début de la nouvelle ligne . La deuxième + sera traitée comme une addition mathématique unaire et tentera de convertir la chaîne en numéro . Considérez ce qui suit:

"Hello" +
+ "World" // -> "HelloNaN" 

Answer 2

Vous avez plusieurs opérateurs, plus à côté de l'autre.

var searchForm = "<table border='0' cellspacing='0' cellpadding='4' id='add-tag2'>"+
+"<tr class='normal'><td bgcolor='#EEEEEE' valign='bottom' nowrap='nowrap'><span class='normal-small'>"+

Notez qu'il existe un opérateur plus à la fin de la première ligne, et un au début de la dernière ligne. Retirer un de ces opérateurs (ainsi que pour chaque ligne), et vous aurez probablement se débarrasser de l'erreur.

Par ailleurs, JSLint trouve ces erreurs dans un tournemain.

Answer 3

Prenez les symboles + l'extrémité de chaque ligne var searchForm

var searchForm = "<table border='0' cellspacing='0' cellpadding='4' id='add-tag2'>"
      +"<tr class='normal'><td bgcolor='#EEEEEE' valign='bottom' nowrap='nowrap'><span class='normal-small'>"
      +"<input name='predicate-name2' type='text' class='normal' id='predicate-name2' size='4' />"
      +"</span></td>"
      +"<td bgcolor='#EEEEEE' valign='bottom' nowrap='nowrap'><span class='normal-small'>&lt;=</span></td>"
      +"<td bgcolor='#EEEEEE' valign='bottom' nowrap='nowrap'>x</td>"
      +"<td valign='bottom' bgcolor='#EEEEEE'>&lt;=</td>"
      +"<td valign='bottom' bgcolor='#EEEEEE'><span class='normal-small'>"
      +"<input type='text' name='object-object2' id='object-object2' class='normal' size='4' />"
      +"</span></td>"
      +"</tr>"
      +"</table>";

Answer 4

Faire toute la variable de searchForm existent que sur une seule ligne fait fonctionner ... mais ce n'est pas élégant. S'il y a des meilleures solutions, je serais très curieux de savoir.