加载以在 jQuery 中作为追加工作

load to work as append in jquery

本文关键字：追加 工作 jQuery 加载      更新时间：2023-09-26

我正在使用JS函数创建表单..我希望当这个函数被调用两次时，表单应该创建两次..我正在使用jquery加载，因此它一次又一次地覆盖...

我的jquery代码：

function form(module,user) {
    $.post("php/test.php",{ module:module , user:user}, function(data, status){
    var f= jQuery.parseJSON( data );
   $(".cards-container").load("modules/ams.html",function(){
     $(".cards-container > div").addClass("card card-shadow animated fadeInDown");
     $(".form-t").append("<input type='text'"+"placeholder="+f.text+" name='fname' required>");
   });
 });}
form("home",200);form("home",300);

AMS.html：

<div class='w100 large forms'>
        <form action='test.php' method='post'>
            <div class="form-t"></div>
  <input type='submit' value='Submit'></form>
  </div>

JQuery load（） 方法总是替换 "element-receiver" 的内容。使用 get（） 方法请求新内容并附加后续内容：

var f= jQuery.parseJSON( data );
$.get('modules/ams.html', function(data){ 
  $(".cards-container").append(data);
  $(".cards-container > div").addClass("card card-shadow animated fadeInDown");
  $(".form-t:last").append("<input type='text'"+"placeholder="+f.text+" name='fname' required>");
});

Load 将始终覆盖。它是 Ajax 方法的快捷函数。因此，请使用 Ajax，以便您可以控制结果：

$.ajax({
    url: "modules/ams.html",
    type: "GET"
}).done(function (result) {
    $(".cards-container").append(result);
});

这只会将内容直接附加到容器中。您将不得不应用所需的任何其他逻辑。请记住，id 应该是唯一的，表单不能嵌套，因此请确保避免在容器已在表单中时使用表单加载 html。

相关文章：