jquery - 提交 jQuery 时将元素添加到列表

Question

如何通过单击“添加按钮”将元素添加到我的列表中，不会在新元素中丢失我的“li”样式。当我尝试使用 append() 添加时，它会丢失我的样式。我知道它为什么会丢失，但我不知道如何修复它。

<div class="wrapper">

    <input type="text" class="text_field" placeholder="Write a new task here..." onfocus="this.placeholder = ''" onblur="this.placeholder = 'Write a new task here...'" />
    <input type="submit" class="add_btn" value="Add" />

    <div class="items">
        <ul class="sortable">
            <li>
                <input class='tasks' type='checkbox' />
                <p>Meet Larry at 6pm</p>
            </li>
        </ul>
    </div>
</div>

CSS:

.tasks {
    position: absolute;
    margin: 20px 20px;
    width: 19px;
    height: 19px;
    display: block;
}
.tasks:before {
    content:"";width: 19px;height: 19px;border: 1px solid #43d6b0;
}

Answer 1

<div class="wrapper">
<form name="newItem" id="newItem">
    <input type="text" class="text_field" id="task" placeholder="Write a new task here..." onfocus="this.placeholder = ''" onblur="this.placeholder = 'Write a new task here...'" />
    <input type="button" id="addItem" class="add_btn" value="Add" />
    </form>
    <div class="items">
        <ul id="tasks" class="sortable">
            <li>
                <input class='tasks' type='checkbox' />
                <p>Meet Larry at 6pm</p>
            </li>

            <li>
                <input class='tasks' type='checkbox' />
                <p>Ovesyan cool mandsadd</p>
            </li>

            <li>
                <input class='tasks' type='checkbox' />
                <p>dsadsa dsadasda adsdasddasdasdasda</p>
            </li>
        </ul>
    </div>
</div>
<script>
    $("#addItem").click(function(){
        var task = $('#task').val();
        $("#tasks").append("<li><input class='tasks' type='checkbox' /><p>" + task + "</p></li>");
      });

     $("#newItem").on('submit',function(e){                 
       //add stuff to database if necessary
         e.preventDefault();
         return false;
      });
</script>

这应该可以满足您的需求。参见 demo here .

编辑:参见最后的 fiddle here