0

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

<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/

4

2 回答 2

3

由于它是一个表单，按 Enter 不仅会触发您的功能，还会提交表单（因为它没有提交给自己的操作），因此页面实际上会刷新，这就是新页面<li>消失的原因。

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

见小提琴：http: //jsfiddle.net/Zjxq5/9/

于 2013-09-29T11:16:21.943 回答
1

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

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

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

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

于 2013-09-29T11:16:05.993 回答