如何在单击的 div 之后添加 AJAX 加载的表单？答案

【问题标题】：How can I add an AJAX-loaded form after the div that has been clicked?如何在单击的 div 之后添加 AJAX 加载的表单？
【发布时间】：2020-01-23 10:08:37
【问题描述】：

我有一个网页上的项目列表。每次单击列表中的任何项目时，我都想通过 Ajax 加载表单。 HTML 如下所示：

<div class="item">
    <... some html code for the first item ...>
</div>
</div class="item">
    <... some html code for the next item ...>
</div>
etc..

我的目标是，如果用户单击第一个“item-div”，则应使用 AJAX 加载表单。加载的表单应插入到“item-div”之后......像这样：

<div class="item">
    <... some html code for the first item ...>
</div>
<form>
    <... some html code for the form... loaded via AJAX...>
</form>
</div class="item">
    <... some html code for the next item ...>
</div>
etc..

我不明白为什么这不起作用。这是我的 jQuery 代码：

$(document).ready(function(){
  $(".item").click(function(){
    $(this).after().load("loadform.php");
  });
});

Ajax-load 函数会覆盖内部的<... some html code... >，而不是在“item-div”之后添加它。怎么了？我该如何解决？

【问题讨论】：

可以使用jQuery insertAfter() 方法，w3schools.com/jquery/html_insertafter.asp 或.append() 方法api.jquery.com/append
我认为这行不通@JordiJordi
您不能将 load() 与 after() 一起使用。当检测到成功响应时（即 textStatus 为“success”或“notmodified”），.load() 将匹配元素的 HTML 内容设置为返回的数据。
@Jinesh 也许它不起作用，没关系我给这个链接不同的结果，因为 ajax 加载结果，然后问题是它是如何插入到 DOM 中的。 jsfiddle.net/designaroni/b33tL7hu
@Gowire 我可以知道 item-div 的位置吗？

标签： jquery html ajax

【解决方案1】：

我在互联网的某个地方没有虚拟 sn-p，我可以在其中加载一些虚拟内容来模拟您的 loadform.php，但我在本地对其进行了测试并且它正在工作。

先附上点击事件，也可以使用on('click', function ...)
您将点击的元素存储在currentItem
您使用 $.get 执行 Ajax 请求
如果成功，将Ajax请求结果附加到存储元素currentItem

$(document).ready(function(){
    $(".item").click(function(){
        var currentItem = $(this);
        $.get('loadform.php', function(data){
            currentItem.after(data); 
        }).fail(function() {
            console.log( "Can't load loadform.php" );
        })
    });
});

.item {
    cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
    ... some html code for the first item ...
</div>
<div class="item">
    .. some html code for the next item ...
</div>

【讨论】：

【解决方案2】：

也许试试下面的方法。从php中获取数据，然后使用after函数插入。

$.get('loadform.php', function(data){ 
    $(this).after(data); 
  });

【讨论】：

我试过这个。但是，它似乎无法正常工作。在边缘控制台中，我可以看到错误“SCRIPT5007：无法获取未定义或空引用的属性'createDocumentFragment'”（以及对 jquery.min.js 的引用）如果我将 $(this) 替换为 $(".item") 它将起作用（但是表单当然是在每个item-div之后添加的。使用“this”似乎有一些问题......???

【解决方案3】：

您不能将 load() 与 after() 一起使用。当检测到响应成功时（即 textStatus 为“success”或“notmodified”时），.load() 将匹配元素的 HTML 内容设置为返回的数据。如果您想从 loadform 加载内容，可以尝试 $。获取方法如下。

$(document).ready(function(){
      $(".item").click(function(){
         $.get('loadform.php', function(data){ 
        $(this).after(data); 
       });

      });
    });

【讨论】：

谢谢...但似乎使用 $(this).after() 不起作用...但 $(".item").after() 似乎有效。 .. 嗯
如果我的回答对你有用，你能接受吗？
仅代码的答案被认为是低质量的：请务必说明您的代码的作用以及它如何解决问题。如果您可以在帖子中添加更多信息，它将帮助提问者和未来的读者。另请参阅解释完全基于代码的答案：meta.stackexchange.com/questions/114762/…

【解决方案4】：

有时会发生这样的情况，如果您使用 jquery 将新的 html 代码插入到 DOM 中，那么您将遵循此过程。这将刷新所见背后的 DOM。它可以帮助你，一个没有 ajax 的简单测试。你的ajax请求有错误，首先一定要console.log(data)你的返回数据，然后追加。谢谢。

    <!DOCTYPE html>
      <html>
        <head>
         <title>Smple Test</title>
        </head>
      <body>
       <div class="item">Div 1</div>
       <div class="item">Div 2</div>
       <div class="item">Div 3</div>
       <div class="item">Div 4</div>
     </body>
    </html>


    $(document).ready(function(){
      var form = '<form action="#" id="form1"><div>Hello Text</div></form>';
      $(document).on('click','.item',function(){
       $(this).after(form);
      });
    });

A Simple JSFiddle Test

【讨论】：