javascript - 使用 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)。