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

Question

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

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

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

，内容在 features.php

上

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中，并在加载该标签时将其放回标签中。
• 允许每个选项卡上的保存按钮保存服务器端的所有信息，并在检索选项卡时填充表单服务器端。