刷新后保留通过 jquery 动态生成的输入字段

2023-12-20

我正在使用下面的脚本根据需要生成输入字段。但是,刷新或单击返回提交错误页面时,输入的字段和信息会消失。有什么办法可以在点击返回或刷新页面后保留字段吗?

$(document).ready(function() {
var MaxInputs       = 67;
var InputsWrapper   = $("#InputsWrapper"); 
var AddButton       = $("#AddMoreFileBox");
var x = InputsWrapper.length;
var FieldCount=8; 
$(AddButton).click(function (event)
{
    if(x <= MaxInputs) 
    {
        FieldCount++; 
        $(InputsWrapper).append('<div><input type="text" class="input" size="22"  
        maxlength="80" name="hostname'+ FieldCount +'" id="field_'+ FieldCount +'"/>
        <input class="left-margin" type="text" SIZE="15" MAXLENGTH="15" name="ipaddr'+ 
        FieldCount +'" id="field_'+ FieldCount +'"/><input class="left-margin" 
        type="text" SIZE="15" MAXLENGTH="15" name="app'+ FieldCount +'" id="field_'+ 
        FieldCount +'"/> <button type="button"class="removeclass">Remove</button> 
        </div>');
        x++; 
    }
return false;
});
   $("body").on("click",".removeclass", function(event){
    if( x > 1 ) {
            $(this).parent('div').remove();
            x--;
    }
 return false;

 }) 
 });

如果您可以使用 HTML5 功能,一种方法是使用本地存储。创建输入字段时,您可以将所做的操作保存在本地存储中。

这样,当页面加载时,您可以检查本地存储中的内容,检测页面之前是否加载过,并重建之前动态添加的字段。

像这样的东西:

$(document).ready(function(){
    $("#myButton").click(function(){
        var htmlAppend = '<input type="text" name="theName" />';
        $("#content").append(htmlAppend);
        //After appropriate checks that local storage is supported...
        localStorage.setItem("htmlAppend", htmlAppend);
    });

    var htmlAppend = localStorage.getItem("htmlAppend");
    if (htmlAppend) {
        $("#content").append(htmlAppend);
    }
});

当然这只是一个例子,以提供一个方向。 您可能需要注意的其他事项:

  • 如果可以通过多个事件添加其他几个 HTML 片段,则必须update本地存储而不仅仅是设置它。即:检查已存储的内容,如果有则将新内容追加到其中。
  • 这不会保存您可能附加到动态 HTML 的事件处理程序。如果您想实现这一目标,则必须以某种方式在存储值中对其进行编码。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

刷新后保留通过 jquery 动态生成的输入字段 的相关文章

随机推荐

  • C 中的二进制补码加法溢出

    我在 C 中看到一个有缺陷的代码 用于检查加法是否会导致溢出 它可以很好地与char 但当参数是时给出错误的答案int我不明白为什么 这是代码short论据 short add ok short x short y short sum x
  • 多行 UILabel 上的自动收缩

    是否可以在多行上联合使用 autoshrink 属性UILabel 例如 2 行可用的大文本大小 我找到了这个链接http beckyhansmeyer com 2015 04 09 autoshrinking text in a mult
  • 以编程方式为 iPhone 创建 x509 证书,而不使用 OpenSSL

    有没有一种方法可以仅使用 Apple 安全框架以编程方式在 iPhone 应用程序中创建自签名证书 即不必搞乱 OpenSSL 吗 如果没有 openSSL 或 RSA 库 这似乎是不可能的 我搜索了一些答案 这似乎是最好的 甚至包括与此问
  • Visual Studio C++ 2010 中的自动创建实现[重复]

    这个问题在这里已经有答案了 我想知道是否有一种方法可以编写完整的头文件并让 Visual Studio 创建适当的实现文件来节省所有额外的工作 我觉得他们一定想到了 因为这是一个如此简单的事情 但我在任何地方都找不到它 CodeWiz ht
  • 在Visual Studio中查看xml文件时如何获取某个节点的xpath?

    当我在 Visual Studio 中打开 xml 文件并浏览它时 我想获取光标处某个节点的 xpath 例如右键单击并选择 从该节点获取 xpath 或类似的内容 我们如何在 Visual Studio 2010 中做到这一点 或者使用哪
  • bootstrap,带下拉菜单的工具提示,在按钮组中似乎有效果

    在引导程序中 带有下拉菜单的工具提示 当我将鼠标悬停在负责工具提示的按钮上时 附加到按钮组中一个按钮的悬停数据切换似乎会产生效果 然后它还会调整其看起来不太好的位置 请帮我 这是我的代码
  • 创建数据透视表时VBA运行时错误5

    我搜索了互联网代码 并能够组合一个宏来通过 VBA 创建数据透视表 当创建数据透视表缓存时 我不断收到运行时错误 5 无效的过程调用或参数 Set myPivotTable ThisWorkbook PivotCaches Create S
  • 如何将值推入 jsonb 列中的 key[] 中?

    我有这样的jsonbPostgres 表中的结构 res 123 223 我想将价值观推向res 大批 我不知道数组中有多少个值jsonb insert在位置上操作 所以我尝试了 1位置 select jsonb insert res 12
  • 如何使用 Spring ROO 访问第三方 API(例如:Facebook、Linkedin、Twitter)

    我正在尝试使用 Spring ROO 访问第三方 API 例如 Facebook Linkedin Twitter 可以使用 Spring ROO 来做吗 如果可能的话 请帮助我 我该怎么做 谢谢 穆尼 如果您专门针对社交网络集成 您可以轻
  • ASP.NET MVC - 根据 Active Directory 对用户进行身份验证,但需要输入用户名和密码

    我正在开发一个 MVC3 应用程序 该应用程序需要根据 AD 对用户进行身份验证 我知道 MVC3 中有一个选项可以创建一个 Intranet 应用程序 该应用程序自动根据 AD 对用户进行身份验证 但它使用 Windows 身份验证并自动
  • 如何在 VB6 中重新初始化 UDT?

    我有一个循环 它读取一堆 XML 文件 对于每个文件 它验证 XML 中的数据并将其加载到一些 UDT 中 然后对数据进行一些处理 然后它返回到循环的开头 并且 UDT 中仍然包含先前 XML 中的数据 如果在新标签中定义了该标签 则会覆盖
  • docker-compose 重启间隔

    我有一个docker compose yml文件包含以下内容 services kafka listener build command bundle exec kafka foreground restart always other s
  • 更新与更新地点

    我有一个包含很多行的表 我定期想将其中的一列设置为0使用 cron 什么更快 更少的内存消耗 做UPDATE在所有行上 即没有WHERE条款 或做一个UPDATE only WHERE mycolumn 0 正如在原始帖子的评论中注意到的那
  • 在调用者的返回序列中跳过函数

    在一系列函数调用中 例如 main gt A gt B gt C 当被调用函数完成时 它通常返回到调用函数 例如C 返回到B 这将返回到A etc 我想知道是否也可以直接返回到调用序列中较早的函数 所以C 还给main 并跳过B and A
  • C# 字节数组到固定 int 指针

    是否可以以某种方式转换由fixed 语句创建的指针的类型 情况是这样的 我有一个字节数组 我想对其进行迭代 但是我希望将这些值视为 int 从而使用 int 而不是 byte 这是一些示例代码 byte rawdata new byte 1
  • Three.js:如何缩放和偏移图像纹理?

    如何缩放和偏移图像纹理 我的图像尺寸是 1024 像素 x 1024 像素 var textureMap THREE ImageUtils loadTexture texture png 看一下纹理文档 https threejs org
  • 禁用 UICollectionView 中 UIAttachmnetBehavior 的垂直移动

    我尝试在水平 UICollectionView 中模仿消息应用程序弹簧动画 我在 UICollectionViewFlowLayout 子类中使用了 UIAttachmentBehavior 但问题是 当我水平滚动时 单元格也会垂直和水平移
  • 视图之间快速导航的设计建议

    通常 当视图需要大量绑定或某些 UI 元素 例如 Bing 地图 时 需要 一段时间 来加载 例如半秒到一秒 我不希望 点击 操作 例如点击列表框中的元素 和导航操作 显示新页面 之间出现延迟 我不介意逐步显示页面 例如 对于 Bing 地
  • 查找满足条件的向量内的索引

    我正在寻找一个条件 它将返回满足条件的向量的索引 例如 我有一个向量b c 0 1 0 2 0 7 0 9 我想知道 b gt 0 65 的第一个索引 在这种情况下 答案应该是 3 I tried which min subset b b
  • 刷新后保留通过 jquery 动态生成的输入字段

    我正在使用下面的脚本根据需要生成输入字段 但是 刷新或单击返回提交错误页面时 输入的字段和信息会消失 有什么办法可以在点击返回或刷新页面后保留字段吗 document ready function var MaxInputs 67 var