Создание редактируемых списков с использованием HTML и JQuery

Question

Я пытаюсь создать редактируемый список в HTML и JQuery. Список должен добавляться каждый раз, когда пользователь вводит значение в форме и обращается к форме формы отправки.

Вот 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> 

Вот код 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(); 

}); 

My JS Fiddle ручка находится: http://jsfiddle.net/aD9dr/

Спасибо большое!

Answer 1

Я думаю, что есть разрыв между вашей разметкой и скриптом. Что вы можете сделать, это связать триггер событий в вашей части скрипта.

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

Кроме того, убедитесь, что вы нацеливаете правильный тег. Вы целились $('todo-list.ul'), которые, в разметке, будет <todo-list class="ul"></todo-list>, который не является допустимым тегом :)

Updated Fiddle for you

Answer 2

Чтобы добавить до ответа Чаде, попробуйте удалить форму и изменение

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

для

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

Я думаю, вам нужно отправить сообщение на сервер, чтобы выполнить то, что вы хотите сделать, чтобы форма POST казалась p бесполезно.