Question

http://adamginther.com/checkify/lists-overview.html？

提交输入时，应创建一个列表项，其中包含文本字段中的内容。它出现在我的网站上的一秒钟，但在小提琴上，并没有附加任何文字。我已经尝试创建一个按钮标签和一个标签来解决这个问题，但我没有结果。

HTML：

<div id="lists-overview">
        <form>
            <input type="text" placeholder="Create a list">
            <input type="submit" value="Add List" id="list-builder">
        </form>
          <ul>
              <li><a href="index.html">Item 1</a></li>
              <li><a href="#">Item 2</a></li>
              <li><a href="#">Item 3</a></li>
          </ul>
</div>

Javascript：

var createList = $('#lists-overview input[type="text"]').val();

$('#list-builder').click(function() {
    $('#lists-overview ul li:last').after('<li>Test</li>');

});

Answer 1

输入按钮正在提交表单，因此重新加载页面。您需要使用e.preventDefault()或更改按钮的“提交”类型来克服按钮的默认行为。

仅通过更改输入type='button'

的工作示例

http://jsfiddle.net/Ysq4a/5/

Answer 2

您需要使用e.preventDefault()来阻止默认操作，该操作会重新加载input提交按钮的页面：

$('#list-builder').click(function(e) {
    e.preventDefault();
    $('#lists-overview ul li:last').after('<li>Test</li>');
});

<强> Updated Fiddle

Answer 3

h提交按钮正在提交问题

的表单

通过添加e.preventDefault（）来阻止默认提交功能;添加li后

$('#list-builder').click(function(e) {
    $('#lists-overview ul li:last').after('<li>Test</li>');
    e.preventDefault();
});

或只是将按钮类型提交为按钮

<input type="button" value="Add List" id="list-builder">

使用jQuery追加li使其立即消失

3 个答案: