如何在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 位，请参阅此帖子以获取提示。

请注意，您可以使用$('#formID').serialize();快速序列化所有表单数据。