jQuery ajax多次添加html

Question

我目前遇到一些問題，基本上我創建了一些populateModal（）函數來填充各個html的模式容器。它適用於populateModal3和populateModal4（相同的功能，但具有不同的url值）。

ajax返回json中的數據，它在其他兩個populateModal函數中工作得很好。

這裏的功能

$.ajax({ 
       url: "transaction/get_transaction", 
       dataType: 'json' 
      }).done(function(data){ 
       $('#transModalContainerDel, #transModalContainerEdit').empty(); 
       console.log(data); 
       for (var i = 0; i < data.length; i++) 
       {     
        console.log('id data: ' + data[i].id); 
        theDelTransModal += 'id modal: ' + data[i].id; 
        //theDelTransModal += '<div id="transModalDel' + data[i].id + '" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="deleteTransaction" aria-hidden="true">'; 
        //theDelTransModal += '<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="myModalLabel">Delete transaction?</h3></div>'; 
        //theDelTransModal += '<div class="modal-body"><p>Are you sure you want to delete this transaction? Note that you can\'t undo this action.</p></div>'; 
        //theDelTransModal += '<div class="modal-footer"><a class="btn" data-dismiss="modal" aria-hidden="true">Cancel</a><a href="transaction/delete_transaction/' + data[i].id + '" class="btn btn-primary" id="delete-trans" data-dismiss="modal">Delete</a></div>'; 
        //theDelTransModal += '</div>'; 
        //$('#transModalContainerDel').append(theDelTransModal); 
        console.log(theDelTransModal); 
       }  
      }); 

的片斷，你可以從上面的代碼中看到，返回的數據是正確JSON格式。但是我嘗試記錄的id返回這個值。

id data: 21 
id modal: 21 
id data: 22 
id modal: 21id modal: 22 

我不確定出了什麼問題，因爲此功能適用於其他網址。

在此先感謝

Answer 1

使用AJAX的成功方法

$.ajax({ 
       url: "transaction/get_transaction", 
       dataType: 'json', 
       success:function(data){ 

$('#transModalContainerDel, #transModalContainerEdit').empty(); 
       console.log(data); 
       for (var i = 0; i < data.length; i++) 
       {     
        console.log('id data: ' + data[i].id); 
        theDelTransModal += 'id modal: ' + data[i].id; 
        //theDelTransModal += '<div id="transModalDel' + data[i].id + '" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="deleteTransaction" aria-hidden="true">'; 
        //theDelTransModal += '<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="myModalLabel">Delete transaction?</h3></div>'; 
        //theDelTransModal += '<div class="modal-body"><p>Are you sure you want to delete this transaction? Note that you can\'t undo this action.</p></div>'; 
        //theDelTransModal += '<div class="modal-footer"><a class="btn" data-dismiss="modal" aria-hidden="true">Cancel</a><a href="transaction/delete_transaction/' + data[i].id + '" class="btn btn-primary" id="delete-trans" data-dismiss="modal">Delete</a></div>'; 
        //theDelTransModal += '</div>'; 
        //$('#transModalContainerDel').append(theDelTransModal); 
        console.log(theDelTransModal); 
       }  
} 
      }); 

Answer 2

它只是因爲字符串連接

theDelTransModal += 'id modal: ' + data[i].id; 

這等於給：

theDelTransModal = theDelTransModal+ 'id modal: ' + data[i].id; 

去除，再加上它都會好的。