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。

编辑：查看最后的小提琴here

提交jQuery时将项添加到列表中

1 个答案: