Я получаю NaN, когда пытаюсь вставить HTML в элемент DIV с помощью jQuery - PullRequest
Новая
       16

Я получаю NaN, когда пытаюсь вставить HTML в элемент DIV с помощью jQuery

10 голосов
/ 27 мая 2010

Я пытаюсь отобразить текстовое поле при нажатии элемента класса numObj. По какой-то причине я получаю NaNNaNaNaNNaNNaNaNaN, где я ожидаю увидеть результат переменной searchForm в коде ниже.

Я знаю, что NaN означает не число. Чего я не понимаю, так это почему Javascript ожидает число? Я не могу понять, почему это волнует. 

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

    });

Сгенерированный код с классом numObj выглядит примерно так 

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

Ответы [ 4 ]

18 голосов
/ 27 мая 2010

Проблема, как указывали другие, заключается в операторе +. Помимо объединения строк, он также используется в качестве математического сложения. Из-за динамической типизации Javascript использование унарного + одного в строке приведет к преобразованию строки в число: 

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

Несколько строк вашего кода имеют оператор + в конце строки и в начале новой строки . Вторая + будет рассматриваться как унарное математическое сложение и будет пытаться преобразовать строку в число . Учтите следующее: 

"Hello" +
+ "World" // -> "HelloNaN"
10 голосов
/ 27 мая 2010

Рядом с вами несколько операторов плюс. 

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

Обратите внимание, что в конце первой строки есть оператор «плюс», а в конце последней - один. Удалите один из этих операторов плюс (для каждой строки), и вы, вероятно, избавитесь от ошибки.

Кстати, JSLint быстро находит эти ошибки.

4 голосов
/ 27 мая 2010

Снять символы + с конца каждой строки 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>";
0 голосов
/ 27 мая 2010

Если вся переменная searchForm существует только в одной строке, это работает ... но это не элегантно. Если есть какие-то лучшие решения, я бы хотел знать.

...