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

Question

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

0

Я пытаюсь создать редактируемый список в 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();

});

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

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

Ruchita 21 сен. 2013, в 16:32

Источник

Теги:

jquery

html

css

forms

html-lists

2 ответа

Ещё вопросы

Chad · Answer 1 · 2013-09-21T13-28-00.000Z

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

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

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

Обновленный скрипт для вас

Gab · Answer 2 · 2013-09-21T12-14-00.000Z

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

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

для

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

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