0

我遇到了 jquery 和回发的大问题。

我正在向我的页面动态添加 html 元素。例如 JQuery UI 选项卡。

但是在回发后所有动态添加的元素都消失了。

如何在回发后保留所有这些元素以及文本框和日期时间选择器的值？

问候

托比

编辑：

例如，我正在使用以下代码添加一些 JqueryUI 选项卡：

$(function () {
                var $tab_title_input = $("#tab_title"),
            $tab_content_input = $("#tab_content");
                var tab_counter = 1;

                var $addButton = $('<li class="ui-state-default ui-corner-top add-button"><span>+</span></li>');
                $addButton.click(function () { addTab(); });


                var $tabs = $("#tabsTravel, #tabsWork").tabs({ autoHeight: true, fillSpace: true,
                    tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
                    add: function (event, ui) {
                        var tab_content = $tab_content_input.val() || "Tab " + tab_counter + " content.";
                        $(ui.panel).append("<p>" + tab_content + "</p>");

                        $("#tabsTravel ul.ui-tabs-nav").append($addButton);
                    }
                });

                $("#tabsTravel ul.ui-tabs-nav").append($addButton);

                // actual addTab function
                function addTab() {
                    tab_counter++;
                    var tab_title = "worker " + tab_counter;
                    $tabs.tabs("add", "#tabsTravel-" + tab_counter, tab_title)
                 .tabs("select", "#tabsWork-" + tab_counter, tab_title);

                }

                // close icon: removing the tab on click
                $("#tabsTravel span.ui-icon-close").live("click", function () {
                    var index = $("li", $tabs).index($(this).parent());
                    $tabs.tabs("remove", index);
                    tab_counter--;
                });
                $("#tabsWork span.ui-icon-close").live("click", function () {
                    var index = $("li", $tabs).index($(this).parent());
                    $tabs.tabs("remove", index);
                    //                    tab_counter--;
                });
                $('#button').click(function () {
                    addTab()
                });
            });

我怎样才能将此 localStorage 实现到此代码？

问候

闪电侠

4

1 回答 1

0

通常这将是您的服务器端代码的工作；您可以将添加的元素保存在会话缓存中，如果更改需要永久保存，则保存在数据库中。

您也可以考虑使用新的 HTML5会话存储或本地存储，但这种方法可能会比较麻烦；如果可能，最好使用 PHP、.NET 等复杂的服务器端库。

编辑

这是一个简单的例子。假设您的客户端脚本向页面添加了一些 HTML：

var html = "<div>hello world</div>";
$("body").append(html);

现在，您可以像这样将其保存在本地存储中：

localStorage.setItem("dynamichtml", html);

如果您在页面启动脚本中添加如下内容：

$(document).ready(function() {
    if (localStorage["dynamichtml"]) {
        $("body").append(localStorage["dynamichtml"]);
    }
});

然后您将实现动态功能。请注意，localStorage数据将一直保存，直到用户明确删除它。

于 2012-06-25T06:59:36.177 回答