当我尝试使用jQuery将一些HTML插入到DIV元素中时，会得到NaN。

Question

我试图在单击class为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>

- Ankur

---

你的 numArrayPos 属性在 JS 和 HTML 中大小写不同 - 这是一个笔误吗？如果不是，你将会在访问该属性时遇到问题。 - scunliffe

为什么不进行调试？变量searchForm旁边有多个“+”符号。 - Kangkan

@Kangkan - 你有什么推荐用于调试JavaScript的工具吗？这是我遇到的一个大问题。 - Ankur

我使用FireFox和FireBug。IE也提供了一个开发者工具（按F12），它允许进行良好的调试。您可以添加要监视的变量，并设置条件性调试点。 - Kangkan

谢谢，我有一个问题。 Firebug 不会显示我的大多数 JavaScript？ 我将不得不想办法解决它。 我想知道是否您知道任何 Eclipse 插件，可以将 JS 规则嵌入到 Eclipse 中，并允许您在编码时进行调试...我已经搜索了几个，但从我所看到的来看，它们并没有给我足够的信心。 - Ankur

Answer 1

正如其他人指出的那样，问题在于+运算符。除了连接字符串之外，它还用作数学加法。由于Javascript的动态类型，仅使用一元+运算符对字符串进行操作会将字符串转换为数字：

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

你的代码中有几行末尾和新行开头都有+操作符。第二个+将被视为一元数学加法，并尝试将字符串转换为数字。请考虑以下示例：

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

- Andy E

---

谢谢Andy - 我选择你的答案，因为它提供了更多关于NaN错误的信息。 - Ankur

Answer 2

你有多个相邻的加号运算符。

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可以很快地发现这些错误。

- GlenCrawford

Answer 3

将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>";

- Sam

Answer 4

将整个searchForm变量仅存在于单行上使其工作...但这并不优雅。如果有更好的解决方案，我很乐意知道。

- Ankur

---

你能否将HTML隐藏在页面中，并根据需要进行更改？ - Sam

我非常支持@Sam的建议。 - GlenCrawford

是的，我确实打算这样做。这样更有意义。 - Ankur