Question

截至目前，这是我用来在<div> div中动态创建widgets的代码。有一个复选框列表，单击添加按钮后，动态创建带有复选框值的ID的div。但刷新动态创建的div后会被破坏。如何保存动态创建的div。

HTML

    <div>

      <input type="checkbox" name="basic_line" value="basic_line">Basic line<br>
      <input type="checkbox" name="pie_chart" value="pie_chart">Pie Chart<br>
      <input type="button" value="Add" id="btnClick">


    </div>


    <div id="widgets" class="span6"></div>

JS

$(function(){
       $('#btnClick').click(function(){
           var val = [];
           $(':checkbox:checked').each(function(i){
              val[i] = $(this).val();
           });
            for (var value in val){

                $( "#widgets" ).append( "<div class = "+val[value]+
                ">"+'<input type="button" value = "Remove" onClick="remove_widget(\'' + val[value] + '\')" />'+
                "<div id="+val[value]+" style='height: 300px'></div></div>");
            create_widget();
            $( "#"+val[value] ).draggable();


       }
      });
    });

Answer 1

您可以在Cookie中存储值数组，您可以在重新加载页面后添加。

只需遍历数组中的每个值并执行点击功能。

以下是如何在cookie中存储数组： https://stackoverflow.com/a/1959540/540247

Answer 2

您可以用来实现此目的的是 DOM Storage - 它可以在 all modern browsers (including IE8)中使用。将DOM更改保存在DOM存储中将保留您在页面重新加载后所做的更改。

如何在刷新时保存动态创建的div

2 个答案: