关于将元素保存到 DOM 和选项卡的 jQuery 问题

Question

我正在开发一个项目，并且正在使用 jQuery 选项卡，如下图所示。我安装了一个内联编辑脚本来修改文本，并根据需要删除。此时不涉及数据库，我有一个 VIN 解码器脚本，它提取默认功能，如果需要，他们可以对其进行编辑，并且它在 DOM 中进行编辑。它工作得很好，但是当我将选项卡切换到“内部”，然后返回“外部”时，外部内容将返回到原始列表，并且不会保存任何更新。

这可能是因为主页位于 add-vehicle.php ，在该页面上，这就是我获取内容的方式：

<div id="tabContent">
        <div id="contentHolder">
            <!-- The AJAX fetched content goes here -->
        </div>
    </div>

并且内容位于 features.php

< img src="https://i.sstatic.net/hPh2J.jpg" alt="在此处输入图像描述">

var Tabs = {
    'Mechanical'    : 'features.php?feature=MECHANICAL&vin='+vin+'',
    'Exterior'  : 'features.php?feature=EXTERIOR&vin='+vin+'',
    'Interior'  : 'features.php?feature=INTERIOR&vin='+vin+'',
    'Safety'    : 'features.php?feature=SAFETY&vin='+vin+'',
}

有人对我如何执行此操作有任何建议吗？我想要发生的是所有内联编辑都将被保存，并且我可以切换不同的选项卡并进行这些更改，并且所有内容都将被保存。

不确定我解释得如何，如果您需要查看更多代码，请告诉我。

谢谢

Answer 1

这比您可能预期的要复杂一些，您要在保存任何数据之前从 DOM 中删除表单。

当为每个选项卡重新加载代码时，您将重新开始处理表单。

您可以通过几种方法解决此问题：

• 在加载每个选项卡后将其内容存储在 DOM 中，并在选项卡不在视图中时将其隐藏。
• 当每个选项卡被“卸载”时，将数据存储在 JavaScript 中，并在加载该选项卡时将其放回选项卡中。
• 允许每个选项卡上的保存按钮将所有信息保存在服务器端，并在检索选项卡时在服务器端填充表单。