Ottengo NaN quando tento di inserire dell'HTML in un elemento DIV con jQuery

Question

Sto provando a visualizzare una casella di testo quando si fa clic su un elemento di classe numObj. Per qualche ragione ottengo NaNNaNaNaNNaNNaNaNaN dove mi aspetto di vedere il risultato della variabile searchForm nel codice qui sotto.

So che NaN sta per Not a Number. Quello che non capisco è perché Javascript sta aspettando un numero? Non riesco a capire perché ci tenga.

$(".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); 

    }); 

Il codice generato che ha la classe numObj simile a questa

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

Answer 1

Il problema, come altri hanno sottolineato è l'operatore +. Oltre a concatenare le stringhe, viene anche usato come aggiunta matematica. A causa di tipizzazione dinamica di Javascript, l'uso del solo su una stringa unaria + causerà la stringa da convertire in un numero:

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

Diverse linee del codice hanno l'operatore + alla fine della linea e la inizio della nuova riga. Il secondo + verrà considerato come un'aggiunta matematica unaria e tenterà di effettuare il convert the string to a number. Considera quanto segue:

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

Answer 2

Si dispone di più operatori più accanto gli uni agli altri.

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'>"+ 

Si noti che è presente un operatore più alla fine della prima riga e uno all'inizio dell'ultima riga. Rimuovi uno di questi operatori plus (per ogni riga) e probabilmente eliminerai l'errore.

A proposito, JSLint trova questi errori in un attimo.

Answer 3

Prendere simboli + fuori alla fine di ogni linea di 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

Rendere l'intera variabile searchForm esistono solo su una singola riga lo fa funzionare ... ma questo non è elegante. Se ci sono soluzioni migliori, sarei curioso di sapere.