Question

我只是想知道是否有人可以指出我如何在网页上创建基于用户条目的动态列表的正确方向，而不是每次都刷新页面。

例如，用户会：

在文本框中输入单词
点击按钮
这个词会出现在页面的其他地方
该字将从文本框中删除

任何输入的新单词都会自动写在任何先前输入的单词下面。

Answer 1

<div id="target"><div>

<input type="text" id="newInput" />
<input type="button" id="saveInput" />

<script>
// when button is pressed:
$('#saveInput').on('click', function(){
    // check if something is there
    if( $('#newInput').val().length !==0){
        $('#target').append('<div>'+ $('#newInput').val()+'</div>'); //append to a target
        $('#newInput').val(''); // empty input
        $('#newInput').focus() // for bonuspoint, place cursor back in input
    }
});
</script>

如果您希望每个新条目都作为第一个列表项，请使用prepend()代替append()

Answer 2

这是一个有效的例子：

HTML：

<input type="text" id="txtWord"/>
<input type="button" id="btnAddWord" value="Add new word" />

<ul id="words">
</ul>

脚本：

$(document).ready(function(){
    $('#btnAddWord').bind('click', function(){
        if( $('#txtWord').val() !== ""){
            $('#words').append('<li>'+ $('#txtWord').val()+'</li>');
            $('#txtWord').val('');
        }
    });
});

实施例

http://jsfiddle.net/AfNgH/

使用ajax / jQuery更新按钮单击列表

2 个答案: