使用 JQuery 添加列表项时出现问题

Issue with adding a list item using JQuery

本文关键字：问题 JQuery 添加 列表 使用      更新时间：2023-09-26

我有这段代码，它之前就可以工作了。然后我开始将代码放入小函数中，现在它不起作用。我可以看到它正在添加列表项，但也会自动删除它。请指导 -

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

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

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

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

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

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

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

相关文章：