使用 .ajax 提交和显示数据，但 css 直到页面真正刷新后才会生效

Question

我正在使用 jquery 的 .ajax 函数将数据发送到数据库表并在页面上显示数据而不刷新页面。

在我显示 db 表内容的查询中，每个条目都包装在一个名为 .wrap

的 div 类中

该类的下边距为 30 像素。当我使用我的表单并显示新添加的数据时，css 不会显示。边距不存在，但是当我手动刷新页面时，css 会生效。可能是什么问题呢？下面是我的代码

$(function() {
    $('#form').submit(function(e) {

        var data = $(this).serialize();

        // Stop the form actually posting
        e.preventDefault();

        // Send the request
        $.ajax({
            type: "POST",
            url: "submit.php",
            data: data,
            cache: false,
            beforeSend: function() {
                var error = '';

                if (!$.trim($("#cat").val())) {
                    error = "<p>the cat field is empty</p>";
                }

                if (!$.trim($("#box").val())) {
                    error += "<p>the box field is empty</p>";
                }

                if (error) {
                  $(".fb-error").html(error);
                  $(".fb-error").css( "display", "block" );
                  xhr.abort();
                }                       

                },
            success: function(html){
                 $(".fb-error").css( "display", "none" );
                $('textarea#box').val('');
                $("#box-wrap").prepend(html);
            }
        });
    });
});

编辑：

问题是，当我提交表单并且内容第一次出现时，我的 .wrap 类不在新内容周围。但是当我刷新页面时，新添加的内容周围会出现 .wrap 类。

所以问题是在新内容出现后立即缺少 .wrap 类，但我不知道为什么或如何解决它。 .wrap 类围绕着除新数据块之外的每一块数据。

每一行都在它自己的类中。喜欢

<div class="wrap">row 3</div>
<div class="wrap">row 2</div>
<div class="wrap">row 1</div>

这就是我在通过 ajax 发送表单时向数据库添加新条目时的样子。

row 4
<div class="wrap">row 3</div>
<div class="wrap">row 2</div>
<div class="wrap">row 1</div>

刷新后的样子

<div class="wrap">row 4</div>
<div class="wrap">row 3</div>
<div class="wrap">row 2</div>
<div class="wrap">row 1</div>

我在服务器端显示结果的方式

foreach ($query as $row) {
        echo '<div class="wrap">' . $row["box"] . '</div>';
    }

这是我的 submit.php。我已经清除了所有问题以进行故障排除。这正是我目前正在使用的。

include 'connect.php';

$string = strip_tags($_POST["box"]);

$stmt = $dbh->prepare("INSERT INTO boxes (box) VALUES (:box)");

$stmt->execute(array(
":box" => $string
));

Answer 1

只需更改此...

$("#box-wrap").prepend(html);

...到这个...

$("#box-wrap").prepend('<div class="wrap">' + html + '</div>');

它应该可以正常工作（假设您的 AJAX 总是只返回一行要添加 - 如果没有，您需要在服务器端进行相同的更改，或者对结果进行一些更复杂的解析)。