使用jQuery更新DOM元素

Question

我正在寻找一种方法来更新正在处理的网页，以作为报告供多个不同的人来回传递。 我正在使用表单来接收多个数据，并且想知道如何才能使它立即将内容添加到正确标题下的div中。 我当前正在使用jquery并追加，它看起来像添加所需的输入，然后立即将其删除。 我也尝试使用.live，但它根本没有出现。 有没有一种方法可以使表单输入发布到页面而不提交到另一个页面？

到目前为止，这是我的代码，仅测试将成为问题标题的元素：

<div class="IssueDiv">

</div>

<form id="newIssue">
    <fieldset>
        <legend>Add a new important issue:</legend>
        <input type="text" id="issue" placeholder="Issue Summary...">
        <input type="text" id="issue-client" placeholder="Client...">
        <input class="ticket" type="text" id="issueParent" placeholder="Parent ticket..."><br>
        <textarea placeholder="Issue details..."></textarea><br>
        <button id="addIssue">Add Issue</button>
    </fieldset>
</form>

和jQuery：

<script>
    $(function(){
        $("#addIssue").click(function() {
            var $issue = $("#issue").val();
            var $issueSum = $("<h3></h3>").text($issue);
            $(".IssueDiv").append($issueSum);
        });
    });
</script>

编辑：我正在考虑使用AJAX，但我不确定如何使它，以便所有输入数据将保持不变。 我基本上是想制作一个网页样式的报告，该报告将允许我本人和我的团队更新报告中的条目，并且它们将保留在报告中，直到我们能够通过移除封装了各个问题的div取消它们为止。

我还希望能够在此处分别格式化各个片段，因此，例如，我可以添加一个复选框，指出该问题很紧急，并将其标题格式化为红色。 使数据持久保存，可以添加到新的（div / h / p）元素并显示在主网页上，同时还允许我更新格式的最简单方法是什么？

Answer 1

您的代码似乎添加了文本，然后立即将其删除，因为您的表单已发布并且页面重新加载，从而有效地将页面重置为其初始状态。

如果只想将文本添加到页面而不发布表单或执行任何服务器端处理，则可以使用jQuery的preventDefault()阻止表单发布。 请注意，我已经在表单本身上创建了一个submit侦听器，而不是在“提交”按钮上click了一个侦听器。

$("#newIssue").on('submit', function(e) {
    e.preventDefault();
    ...
});

 $(function () { $("#newIssue").on('submit',function (e) { e.preventDefault(); var $issue = $("#issue").val(); var $issueSum = $("<h3></h3>").text($issue); $(".IssueDiv").append($issueSum); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="IssueDiv"></div> <form id="newIssue"> <fieldset> <legend>Add a new important issue:</legend> <input type="text" id="issue" placeholder="Issue Summary..."> <input type="text" id="issue-client" placeholder="Client..."> <input class="ticket" type="text" id="issueParent" placeholder="Parent ticket..."> <br> <textarea placeholder="Issue details..."></textarea> <br> <button id="addIssue">Add Issue</button> </fieldset> </form> 

但是，请记住，如果使用此功能在计算机之间共享报告，则将无法使用。 这仅在当前浏览器中更新DOM，并且不进行任何数据存储或检索。 如果您需要报告进行在线更新，请考虑使用AJAX将数据发布到服务器端脚本中，而无需刷新页面。 然后包括某种计时器，可以按计划（例如，每10秒）刷新内容（也使用AJAX）。