Question

我想知道如何保存我在jQuery中追加的元素？我有一个表单，当a的值正在改变时，一个元素追加。但是当出现错误时，它会重新加载页面并打印错误。但是，重新加载页面后，附加的元素会消失。

<form method="post" action="?action=comment">
    <select id="tag" name="tag">
        <option value="1">super</option>
        <option value="2">super</option>
    </select>
    <span id="elem_added"></span>
    <input type="submit" value="send" />
</form>

<script>
    $("#tag").change(function(e){
        option = $(this).val();

        if (option == "1")
        {
             $("#elem_added").append("<input type='text' name='test' id='input_added' />");
        }
    });
</script>

所以有什么想法将它保存在我的页面中？

大家好！

ps：我不使用ajax，我不会

Answer 1

HTTP是设计中的无状态协议，您需要状态。

为了解决这个问题Cookies，我们已经介绍了。

在重新加载页面之前存储它，并阅读它，如果它在那里，添加文本。

假设the docCookies shim from MDN

在导航之前

docCookies.setItem("wasloaded","true");

刷新后：

if(docCookies.getItem("wasloaded")){
     //add text
};

在您的情况下，这将是：

    if (option == "1" || docCookies.getItem("wasloaded")){
        $("#elem_added").append("<input type='text' name='test' id='input_added' />");
        docCookies.setItem("wasloaded",true);
    }

顺便说一句，我同意Kevin的观点，AJAX非常适合这类事情。

更现代的方法是使用document.localStorage来维持状态。

Answer 2

因为您知道该元素是什么，不保留它隐藏标记，只是根据您的条件显示它。在重新加载时，只需再次检查您的条件。恕我直言是最好的方法。

如果您仍想附加它，则需要存储您在localstorage或cookie中附加元素（或表单上的html）的信息。

Answer 3

如果您不想使用ajax，可以使用cookies http://www.w3schools.com/js/js_cookies.asp

将数据存储在cookie中并在加载时重新加载

如何在重新加载时保持追加任何元素

3 个答案: