Question

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

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

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

如何在回发后保留所有这些元素以及textboxes和datetimepicker的值？

格尔茨

托比

编辑：

e.g。我正在使用以下代码添加一些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实现到此代码？

格尔茨

B1中！TZ

Answer 1

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

您还可以考虑使用新的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 数据将一直保存，直到用户明确删除它为止。

在回发后保持动态添加的元素

1 个答案: