使用HTML和JQuery创建可编辑列表

我正在尝试用HTML和JQuery创建一个可编辑列表。 每当用户在表单中输入值并点击SubmitForm按钮时，列表就会被追加

以下是HTML代码：

<div id="container">

    <!-- the to-do list -->
    <div class="column">
        <ul id="todo-list" contenteditable="true">
            <li>Item #1 <a href="#" class="todo-list-remove">remove</a></li>
            <li>Item #2 <a href="#" class="todo-list-remove">remove</a></li>
        </ul>

    </div>

    <!-- form to add an item to the list -->
    <div class="column">
        <form id="todo-form" action="#" method="post">
            <label>Add an item</label><br/>
            <input class= "target" name="todo-form-add" id="todo-form-add1" type="text" placeholder="New item">
                <input type="submit" value="Submit" id="btnName" onclick="add_button()">

        </form> 
    </div>

</div>

项目#1
项目#2

添加项目

以下是JQuery代码：

$(document).ready(function() {
    var list = $('#todo-list').val();
});
$("#btnName").click(function(){

      $("#todo-list").append("<li>Message Center<a href='#' class='todo-list-remove'>remove</a></li>");

      $("#todo-list li:last").hide();
      $("#todo-list li:last").fadeIn();

});

$（文档）.ready（函数（）{
var list=$（'#待办事项列表'）.val（）；
});
$（“#btnName”）。单击（函数（）{
$（“#待办事项列表”）。追加（“
消息中心”
”；
$（“#待办事项列表li:last”）.hide（）；
$（“#待办事项列表li:last”）.fadeIn（）；
});

我的JS小提琴手柄位于：

---

非常感谢

我认为您的标记和脚本之间存在脱节。您可以做的是在脚本片段中绑定事件触发器

$(function() {
    $('#btnName').on('click', function() {
        add_item();    
    });
});

另外，确保你的目标是正确的标签。您的目标是

$（'todo-list.ul'）

，它在标记中是

，不是有效的标记：）

---

若要添加Chad的答案，请尝试删除表单并更改

<input type="submit" value="Submit" id="btnName" onclick="add_button()">

为了

提交

我认为你需要发布到服务器上才能完成你想要做的事情，所以一个表单发布看起来很没用

<button id="btnName" onclick="add_button()">Submit</button>