在回發後保持動態添加元素

Question

我遇到了jquery和回發的大問題。

我在動態添加html元素到我的頁面。例如JQuery UI選項卡。

但回發之後，所有動態添加的元素都消失了。

如何在回發後保留所有這些元素以及textboxes和datetimepicker的值？

格爾茨

託比

編輯：

例如我使用這段代碼添加了一些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數據將保持保存，直到用戶明確刪除它。