Tôi nhận được NaN khi tôi cố gắng chèn một số HTML vào một phần tử DIV với jQuery

Question

Tôi đang dò tìm để hiển thị một hộp văn bản khi một phần tử của lớp numObj được nhấp vào. Vì một số lý do tôi nhận được NaNNaNaNaNNaNNaNaNaN nơi tôi mong đợi để xem kết quả của biến searchForm trong mã bên dưới.

Tôi biết NaN là viết tắt của Not a Number. Điều tôi không hiểu là tại sao Javascript lại mong đợi một con số? Tôi không thể hiểu tại sao nó quan tâm.

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

    }); 

Các mã được tạo có lớp numObj trông giống như sau

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

Answer 1

Vấn đề, như những người khác đã chỉ ra là toán tử +. Ngoài các chuỗi nối, nó cũng được sử dụng như là phần bổ sung toán học. Bởi vì gõ động của Javascript, sử dụng unary một mình trên một chuỗi + sẽ gây ra các chuỗi được chuyển đổi thành một số:

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

Vài dòng mã của bạn có các nhà điều hành + ở phần cuối của dòng và đầu dòng mới. Thứ hai + sẽ được coi là một bổ sung toán học đơn nhất và sẽ cố gắng để convert the string to a number. Hãy xem xét những điều sau:

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

Answer 2

Bạn có nhiều nhà khai thác cộng bên cạnh nhau.

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

Lưu ý rằng có một toán tử cộng ở cuối dòng đầu tiên và một ở đầu dòng cuối cùng. Xóa một trong các toán tử cộng (cho mỗi dòng) và có thể bạn sẽ loại bỏ lỗi.

Nhân tiện, JSLint tìm thấy các lỗi này trong nháy mắt.

Answer 3

Đi những biểu tượng + tắt cuối mỗi dòng 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

Làm cho toàn bộ biến searchForm chỉ tồn tại trên một dòng duy nhất làm cho nó làm việc ... nhưng đây không phải là thanh lịch. Nếu có bất kỳ giải pháp tốt hơn tôi sẽ được quan tâm để biết.