Question

我正在尝试用jquery / ajax

创建一个表单

我在做什么：

    var form="<form id='frm'>name: <input type='text' id='name' name='name' /> <br />";
    $("#productos").append(form);

    $.get("bb.php").done(function (data){
          $("#frm").append(data); // this return a select
    });

    $("#frm").append("<p id='a1'>aa</p>");
    $("#productos").append("</form>");

我在期待这个：

<form id="frm">
    name: <input id="nombre" type="text" name="name"></input>
    <select> … </select>
    <p id="a1"> … </p>
</form>

但这就是我得到的：

    <form id="frm">
        name: <input id="nombre" type="text" name="name"></input>
        <p id="a1"> … </p>
        <select> … </select>        
    </form>

我知道我可以使用insertbefore，但我想知道为什么会发生这种情况，如果还有其他方法可以修复

Answer 1

因为你在这里指定的回调 -

$.get("bb.php").done(function (data){
      $("#frm").append(data); // this return a select
});

从服务器获得响应后执行

- 而

$("#frm").append("<p id='a1'>aa</p>");

此行在您的ajax请求触发后立即执行，然后才会收到回复。因此，您的段落出现在select。

之前

如果你想维持订单，那么就这样做 -

$.get("bb.php").done(function (data){
    $("#frm").append(data); // this return a select
    $("#frm").append("<p id='a1'>aa</p>"); // now append the paragraph
});

或 -

$.get("bb.php").done(function (data){
    $(data).insertBefore('#a1'); // this return a select
});

$("#frm").append("<p id='a1'>aa</p>");

为什么要将元素追加到最后

1 个答案: