javascript - 关于将元素保存到 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

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