个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 15:55:28 24 4
gpt4 key购买 nike

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

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

参见 fiddle :http://jsfiddle.net/Zjxq5/9/

关于javascript - 使用 JQuery 添加列表项时出现问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19077369/

24 4 0
文章推荐： javascript - JS 文字数组到 PHP
文章推荐： swift - 如何将 UITableView 作为 subview 添加到 xib 中的 UIView？
文章推荐： arrays - 使用 Swift 的 NSButton 从 NSTableView 上的数组中删除数据
文章推荐： html - 如何阻止 Foundation 的 `.columns` 类添加破坏移动优化的填充？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com