Obtengo NaN cuando intento insertar algo de HTML en un elemento DIV con jQuery

Question

Estoy intentando mostrar un cuadro de texto cuando se hace clic en un elemento de la clase numObj. Por algún motivo, obtengo NaNNaNaNaNNaNNaNaNaN, donde espero ver el resultado de la variable searchForm en el siguiente código.

Sé que NaN significa Not a Number. Lo que no entiendo es por qué está esperando Javascript un número? No puedo entender por qué le importa.

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

    }); 

El código generado que tiene la clase numObj ve algo como esto

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

Answer 1

El problema, como han señalado otros es el operador +. Además de cadenas de concatenación, también se usa como suma matemática. Debido a tipado dinámico de Javascript, el uso de solo en una cadena unario + hará que la cadena que se convierte en un número:

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

Varias líneas de su código tienen el operador + al final de la línea y la comienzo de la nueva línea. El segundo + se tratará como una suma matemática unaria e intentará convert the string to a number. Considere lo siguiente:

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

Answer 2

Usted tiene múltiples operadores más próximos entre sí.

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

Tenga en cuenta que hay un operador de suma al final de la primera línea, y uno en el inicio de la última línea. Elimine uno de estos operadores más (para cada línea), y probablemente se deshaga del error. Por favor, JSLint encuentra estos errores en un santiamén.

Answer 3

Tome los símbolos + fuera de la final de cada línea de 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

Hacer toda la variable searchForm sólo existen en una sola línea que hace que funcione ... pero esto no es elegante. Si hay mejores soluciones, me gustaría saberlo.