如何在jQuery中動態添加列表項目

Question

我正在開發一個移動應用程序，我想在用戶填寫表單並點擊提交按鈕後填充ListView。

我知道如何在jQuery中給列表視圖，但如何在運行時動態地填充它中的項目？

Answer 1

你在找這樣的嗎？

jsFiddle Demo:

HTML：

<div id="listView"></div> 
<input type="button" id="mybutt" value="Submit" /> 

的javascript/jQuery的：

$('#mybutt').click(function() { 
    var out = '<ul><li>Item One</li><li>Item Two</li><li>Item Three</li></ul>'; 
    $('#listView').html(out); 
}); 

---

響應您的評論：「我需要的是按鈕形式的點擊被提交，並且用戶在表單中輸入姓名將在列表中會添加」

首先，你需要保持頁面上的形式是後提交。要做到這一點，你應該在你提交例行添加e.preventDefault();：

$("#target").submit(function(event) { 
    //Manually collect form values and 
    //Use ajax to submit form values here (see notes at bottom) 
    event.preventDefault(); 
}); 

接下來，你想那是在所需的字段中的數據，並添加到<ul>。因此，如上所示更改如下：

$("#target").submit(function(event) { 
    var fn = $('#fname').val(); 
    $('ul').append('<li>' +fn+ '</li>'); 

    //Manually collect form values and 
    //Use ajax to submit form values here (see notes at bottom) 
    event.preventDefault(); 
}); 

對於AJAX位，see this post提示。

注意，您可以使用$('#formID').serialize();快速序列化所有形式的數據。

Answer 2

爵士小提琴：

http://jsfiddle.net/7PzcN/1/

HTML：

<div id="listView"></div> 
<input type="text" name="firstname"/> 
<input type="text" name="lastname"/> 
<input type="button" id="mybutt" value="Submit" /> 

的jQuery：

$('#mybutt').click(function() { 
    var out = '<ul>'; 
    $("input[type=text]").each(function() { 
     out += "<li>" + $(this).val() + "</li>"; 
    }); 
    out += "</ul>"; 
    $('#listView').html(out); 
});