Question

我有这个早期工作的代码。然后我开始将代码放入小的小函数中，现在它无法正常工作。我可以看到它正在添加列表项，但也会自动删除它。请指导 -

<body>
    <header>
            <h1>Your Ration List</h1>

    </header>
    <div id="container">
        <form class="shopList-form">
            <input id="add" type="text" placeholder="Type new item here" />
        </form>
        <ul id="item_list">
            <li id="base" class="hidden">
                <form>
                    <input class="check" type="checkbox" /> <span class="item">Item</span>

                </form>
                <button class="delete_item hidden"></button>
            </li>
        </ul>

JQuery代码 -

$(document).ready(function () {
    /* Get user input */
    getItem();

    function getItem() {
        $('input#add').keydown(function (event) {
            if (event.keyCode == 13) {
                addItem();
            }
        });
    }

    function addItem() {
        $('li#base').clone(true).appendTo('#item_list').removeAttr('id').removeClass('hidden');
        $('ul#item_list>li:last>form>span').text($('input#add').val());
        $('input#add').val("");
    }
});

可在此JSFiddle中找到完整代码 -

http://jsfiddle.net/varunksaini/Zjxq5/8/

Answer 1

因为它是一个表单，按Enter不仅会触发你的功能，而且还会提交表单（因为它没有提交给它自己的动作）所以页面实际刷新，这就是为什么新的<li>消失了

您需要做的就是将return false添加到getItem。

请参阅小提琴：http://jsfiddle.net/Zjxq5/9/

Answer 2

您的脚本遇到的问题是您正在使用表单，当您按Enter键时，它会将表单提交给服务器并重新加载页面。您可以使用preventDefault()功能来避免这种情况。

$('input#add').keydown(function (event) {

        if (event.keyCode == 13) {
            event.preventDefault();
            addItem();
        }
});

示例：http://jsfiddle.net/rdnKq/1/

使用JQuery添加列表项的问题

2 个答案: