jquery - 为什么 jQuery 为每个初始加载的行添加一行，而不是只添加一行？
问题描述
在下面的代码段中，我可以动态添加更多行，如果没有从服务器端代码加载任何行，则可以完美运行，但是如果我最初从服务器端代码加载了 2 行或更多行（或如下例中的硬编码）和我单击“添加行”按钮，它为每个初始加载的行添加 1 行.. 在下面的代码段中，它最初加载了 4 行，因此它添加了 4 个新行而不是仅 1 个。
我该如何解决，以便每次单击按钮仅添加 1 行，并将其添加到所有其他行下方？
$(document).ready(function() {
$("#IT_Email_field_DIV").on("click", ".add_new_frm_field_btn_IT_Email", function() {
var index = $(".form_field_outer_IT_Email").find(".form_field_outer_row_IT_Email").length + 1;
$(".form_field_outer_IT_Email").append(`
<div class="col-md-12 py-2">
<div class="col-md-12 form_field_outer_IT_Email py-0">
<div class="row form_field_outer_row_IT_Email">
<div class="form-group col-md-6">
<input type="text" class="form-control form-control-sm" name="IT_Email_field_text[]" id="IT_Email_field_text_${index}" placeholder="Skriv teksten for opgaven" value="" required />
</div>
<div class="form-group col-md-4">
<select name="IT_Email_field_type[]" id="IT_Email_field_type_${index}" class="form-control form-control-sm select bg-white" required>
<option>--Vælg type--</option>
<option value="textonly">Tekst</option>
<option value="textandfieldfree">Tekst + frittekst felt (maks 50 tegn)</option>
<option value="textandfieldnum">Tekst + numerisk felt (maks 10 tegn)</option>
<option value="textandfielddynvalue">Tekst + DB value felt (maks 50 tegn)</option>
</select>
</div>
<div class="form-group col-md-2 add_del_btn_outer text-right">
<button type="button" class="btn btn-light btn btn-sm add_node_btn_frm_field_IT_Email" data-toggle="tooltip" data-html="true" title="Kopier til nyt felt">
<i class="far fa-copy fa-sm"></i>
</button>
<button type="button" class="btn btn-danger btn-sm remove_node_btn_frm_field_IT_Email" data-toggle="tooltip" data-html="true" title="Slet felt">
<i class="fas fa-trash-alt fa-sm"></i>
</button>
</div>
</div>
</div>
</div>`);
$(".form_field_outer_IT_Email").find(".remove_node_btn_frm_field_IT_Email:not(:first)").prop("disabled", false);
$(".form_field_outer_IT_Email").find(".remove_node_btn_frm_field_IT_Email").first().prop("disabled", true);
$('[data-toggle="tooltip"]').tooltip();
});
});
///======Clone method
$(document).ready(function() {
$("#IT_Email_field_DIV").on("click", ".add_node_btn_frm_field_IT_Email", function(e) {
var index = $(e.target).closest(".form_field_outer_IT_Email").find(".form_field_outer_row_IT_Email").length + 1;
var cloned_el = $(e.target).closest(".form_field_outer_row_IT_Email").clone(true);
$(e.target).closest(".form_field_outer_IT_Email").last().append(cloned_el).find(".remove_node_btn_frm_field_IT_Email:not(:first)").prop("disabled", false);
$(e.target).closest(".form_field_outer_IT_Email").find(".remove_node_btn_frm_field_IT_Email").first().prop("disabled", true);
//change id
//IT_Email
$(e.target).closest(".form_field_outer_IT_Email").find(".form_field_outer_row_IT_Email").last().find("input[type='text']").attr("id", "IT_Email_field_text_" + index);
$(e.target).closest(".form_field_outer_IT_Email").find(".form_field_outer_row_IT_Email").last().find("select").attr("id", "IT_Email_field_type_" + index);
console.log(cloned_el);
//count++;
});
});
$(document).ready(function() {
//===== delete the form fieed row
$("#IT_Email_field_DIV").on("click", ".remove_node_btn_frm_field_IT_Email", function() {
$(this).closest(".form_field_outer_row_IT_Email").remove();
console.log("success");
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.6.0/mdb.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.6.0/mdb.min.css" rel="stylesheet" />
<form action="insert_settings_flowcontact_fields.asp" class="needs-validation" name="InsertSettingsFlowcontactFields_IT_Email_Form" id="InsertSettingsFlowcontactFields_IT_Email_Form" method="post">
<div class="container" id="IT_Email_field_DIV">
<div class="row">
<div class="col-md-12 form_sec_outer_task_IT_Email border ">
<div class="row">
<div class="col-md-6 py-2">
<label> Opgave tekst</label>
</div>
<div class="col-md-4 py-2">
<label> Felt type </label>
</div>
<div class="col-md-2 py-2">
</div>
</div>
<div class="col-md-12 p-1">
<div class="col-md-12 form_field_outer_IT_Email p-0">
<div class="row form_field_outer_row_IT_Email">
<div class="form-group col-md-6">
<input type="text" class="form-control form-control-sm" name="IT_Email_field_text[]" id="IT_Email_field_text_1" placeholder="Skriv teksten for opgaven" value="Første opgave" required />
</div>
<div class="form-group col-md-4">
<select name="IT_Email_field_type[]" id="IT_Email_field_type_1" class="form-control form-control-sm select bg-white" required>
<option>--Vælg type--</option>
<option value="textonly" SELECTED>Tekst</option>
<option value="textandfieldfree">Tekst + frittekst felt (maks 50 tegn)</option>
<option value="textandfieldnum">Tekst + numerisk felt (maks 10 tegn)</option>
<option value="textandfielddynvalue">Tekst + DB value felt (maks 50 tegn)</option>
</select>
</div>
<div class="form-group col-md-2 add_del_btn_outer text-right">
<button type="button" class="btn btn-light btn btn-sm add_node_btn_frm_field_IT_Email" data-toggle="tooltip" data-html="true" title="Kopier til nyt felt">
<i class="far fa-copy fa-sm"></i>
</button>
<button type="button" class="btn btn-danger btn-sm remove_node_btn_frm_field_IT_Email" data-toggle="tooltip" data-html="true" title="Slet felt">
<i class="fas fa-trash-alt fa-sm"></i>
</button>
</div>
</div>
</div>
</div>
<div class="col-md-12 p-1">
<div class="col-md-12 form_field_outer_IT_Email p-0">
<div class="row form_field_outer_row_IT_Email">
<div class="form-group col-md-6">
<input type="text" class="form-control form-control-sm" name="IT_Email_field_text[]" id="IT_Email_field_text_2" placeholder="Skriv teksten for opgaven" value="Anden opgave" required />
</div>
<div class="form-group col-md-4">
<select name="IT_Email_field_type[]" id="IT_Email_field_type_2" class="form-control form-control-sm select bg-white" required>
<option>--Vælg type--</option>
<option value="textonly">Tekst</option>
<option value="textandfieldfree" SELECTED>Tekst + frittekst felt (maks 50 tegn)</option>
<option value="textandfieldnum">Tekst + numerisk felt (maks 10 tegn)</option>
<option value="textandfielddynvalue">Tekst + DB value felt (maks 50 tegn)</option>
</select>
</div>
<div class="form-group col-md-2 add_del_btn_outer text-right">
<button type="button" class="btn btn-light btn btn-sm add_node_btn_frm_field_IT_Email" data-toggle="tooltip" data-html="true" title="Kopier til nyt felt">
<i class="far fa-copy fa-sm"></i>
</button>
<button type="button" class="btn btn-danger btn-sm remove_node_btn_frm_field_IT_Email" data-toggle="tooltip" data-html="true" title="Slet felt">
<i class="fas fa-trash-alt fa-sm"></i>
</button>
</div>
</div>
</div>
</div>
<div class="col-md-12 p-1">
<div class="col-md-12 form_field_outer_IT_Email p-0">
<div class="row form_field_outer_row_IT_Email">
<div class="form-group col-md-6">
<input type="text" class="form-control form-control-sm" name="IT_Email_field_text[]" id="IT_Email_field_text_3" placeholder="Skriv teksten for opgaven" value="Tredie opgave" required />
</div>
<div class="form-group col-md-4">
<select name="IT_Email_field_type[]" id="IT_Email_field_type_3" class="form-control form-control-sm select bg-white" required>
<option>--Vælg type--</option>
<option value="textonly">Tekst</option>
<option value="textandfieldfree">Tekst + frittekst felt (maks 50 tegn)</option>
<option value="textandfieldnum" SELECTED>Tekst + numerisk felt (maks 10 tegn)</option>
<option value="textandfielddynvalue">Tekst + DB value felt (maks 50 tegn)</option>
</select>
</div>
<div class="form-group col-md-2 add_del_btn_outer text-right">
<button type="button" class="btn btn-light btn btn-sm add_node_btn_frm_field_IT_Email" data-toggle="tooltip" data-html="true" title="Kopier til nyt felt">
<i class="far fa-copy fa-sm"></i>
</button>
<button type="button" class="btn btn-danger btn-sm remove_node_btn_frm_field_IT_Email" data-toggle="tooltip" data-html="true" title="Slet felt">
<i class="fas fa-trash-alt fa-sm"></i>
</button>
</div>
</div>
</div>
</div>
<div class="col-md-12 p-1">
<div class="col-md-12 form_field_outer_IT_Email p-0">
<div class="row form_field_outer_row_IT_Email">
<div class="form-group col-md-6">
<input type="text" class="form-control form-control-sm" name="IT_Email_field_text[]" id="IT_Email_field_text_4" placeholder="Skriv teksten for opgaven" value="Fjerde opgave" required />
</div>
<div class="form-group col-md-4">
<select name="IT_Email_field_type[]" id="IT_Email_field_type_4" class="form-control form-control-sm select bg-white" required>
<option>--Vælg type--</option>
<option value="textonly">Tekst</option>
<option value="textandfieldfree">Tekst + frittekst felt (maks 50 tegn)</option>
<option value="textandfieldnum">Tekst + numerisk felt (maks 10 tegn)</option>
<option value="textandfielddynvalue" SELECTED>Tekst + DB value felt (maks 50 tegn)</option>
</select>
</div>
<div class="form-group col-md-2 add_del_btn_outer text-right">
<button type="button" class="btn btn-light btn btn-sm add_node_btn_frm_field_IT_Email" data-toggle="tooltip" data-html="true" title="Kopier til nyt felt">
<i class="far fa-copy fa-sm"></i>
</button>
<button type="button" class="btn btn-danger btn-sm remove_node_btn_frm_field_IT_Email" data-toggle="tooltip" data-html="true" title="Slet felt">
<i class="fas fa-trash-alt fa-sm"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="container py-3">
<div class="row">
<div class="col">
<button type="button" class="btn btn-light btn-rounded py-0 add_new_frm_field_btn_IT_Email" data-toggle="tooltip" data-html="true" title="Tilføj nyt felt"><i class="fas fa-plus add_icon"></i> Add row</button>
</div>
<div class="col text-right" align="right">
<button type="submit" form="InsertSettingsFlowcontactFields_IT_Email_Form" id="InsertSettingsFlowcontactFields_IT_Email_Btn" class="btn btn-primary btn-rounded py-1" data-toggle="tooltip" data-html="true" title="Gem ovenstående Opgave Felter"><i class="far fa-save"></i> Gem Opgave Felter</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<br>
<br>解决方案
违规行是这一行：
$(".form_field_outer_IT_Email").append(`
...因此，当您有 4 个与form_field_outer_IT_Email选择器匹配的元素时，追加将添加到集合中的每个元素。因此，有了 4 个，您将再获得 4 个。
您可以通过执行以下操作将其更改为仅引用集合的最后一个条目以获取单个引用：
$(".form_field_outer_IT_Email").last().append(`
试试下面的例子。添加last()是唯一的更改，但我确实注释掉了 console.logs，因为ADD ROW在可运行代码的输出区域单击几下后，控制台输出开始模糊按钮。
$(document).ready(function() {
//console.log($(".form_field_outer_IT_Email").find(".form_field_outer_row_IT_Email").length)
$("#IT_Email_field_DIV").on("click", ".add_new_frm_field_btn_IT_Email", function() {
// console.log("clicked");
var index = $(".form_field_outer_IT_Email").find(".form_field_outer_row_IT_Email").length + 1;
$(".form_field_outer_IT_Email").last().append(`
<div class="col-md-12 py-2">
<div class="col-md-12 form_field_outer_IT_Email py-0">
<div class="row form_field_outer_row_IT_Email">
<div class="form-group col-md-6">
<input type="text" class="form-control form-control-sm" name="IT_Email_field_text[]" id="IT_Email_field_text_${index}" placeholder="Skriv teksten for opgaven" value="" required />
</div>
<div class="form-group col-md-4">
<select name="IT_Email_field_type[]" id="IT_Email_field_type_${index}" class="form-control form-control-sm select bg-white" required>
<option>--Vælg type--</option>
<option value="textonly">Tekst</option>
<option value="textandfieldfree">Tekst + frittekst felt (maks 50 tegn)</option>
<option value="textandfieldnum">Tekst + numerisk felt (maks 10 tegn)</option>
<option value="textandfielddynvalue">Tekst + DB value felt (maks 50 tegn)</option>
</select>
</div>
<div class="form-group col-md-2 add_del_btn_outer text-right">
<button type="button" class="btn btn-light btn btn-sm add_node_btn_frm_field_IT_Email" data-toggle="tooltip" data-html="true" title="Kopier til nyt felt">
<i class="far fa-copy fa-sm"></i>
</button>
<button type="button" class="btn btn-danger btn-sm remove_node_btn_frm_field_IT_Email" data-toggle="tooltip" data-html="true" title="Slet felt">
<i class="fas fa-trash-alt fa-sm"></i>
</button>
</div>
</div>
</div>
</div>`);
$(".form_field_outer_IT_Email").find(".remove_node_btn_frm_field_IT_Email:not(:first)").prop("disabled", false);
$(".form_field_outer_IT_Email").find(".remove_node_btn_frm_field_IT_Email").first().prop("disabled", true);
$('[data-toggle="tooltip"]').tooltip();
});
});
///======Clone method
$(document).ready(function() {
$("#IT_Email_field_DIV").on("click", ".add_node_btn_frm_field_IT_Email", function(e) {
var index = $(e.target).closest(".form_field_outer_IT_Email").find(".form_field_outer_row_IT_Email").length + 1;
var cloned_el = $(e.target).closest(".form_field_outer_row_IT_Email").clone(true);
$(e.target).closest(".form_field_outer_IT_Email").last().append(cloned_el).find(".remove_node_btn_frm_field_IT_Email:not(:first)").prop("disabled", false);
$(e.target).closest(".form_field_outer_IT_Email").find(".remove_node_btn_frm_field_IT_Email").first().prop("disabled", true);
//change id
//IT_Email
$(e.target).closest(".form_field_outer_IT_Email").find(".form_field_outer_row_IT_Email").last().find("input[type='text']").attr("id", "IT_Email_field_text_" + index);
$(e.target).closest(".form_field_outer_IT_Email").find(".form_field_outer_row_IT_Email").last().find("select").attr("id", "IT_Email_field_type_" + index);
console.log(cloned_el);
//count++;
});
});
$(document).ready(function() {
//===== delete the form fieed row
$("#IT_Email_field_DIV").on("click", ".remove_node_btn_frm_field_IT_Email", function() {
$(this).closest(".form_field_outer_row_IT_Email").remove();
console.log("success");
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.6.0/mdb.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.6.0/mdb.min.css" rel="stylesheet" />
<form action="insert_settings_flowcontact_fields.asp" class="needs-validation" name="InsertSettingsFlowcontactFields_IT_Email_Form" id="InsertSettingsFlowcontactFields_IT_Email_Form" method="post">
<div class="container" id="IT_Email_field_DIV">
<div class="row">
<div class="col-md-12 form_sec_outer_task_IT_Email border ">
<div class="row">
<div class="col-md-6 py-2">
<label> Opgave tekst</label>
</div>
<div class="col-md-4 py-2">
<label> Felt type </label>
</div>
<div class="col-md-2 py-2">
</div>
</div>
<div class="col-md-12 p-1">
<div class="col-md-12 form_field_outer_IT_Email p-0">
<div class="row form_field_outer_row_IT_Email">
<div class="form-group col-md-6">
<input type="text" class="form-control form-control-sm" name="IT_Email_field_text[]" id="IT_Email_field_text_1" placeholder="Skriv teksten for opgaven" value="Første opgave" required />
</div>
<div class="form-group col-md-4">
<select name="IT_Email_field_type[]" id="IT_Email_field_type_1" class="form-control form-control-sm select bg-white" required>
<option>--Vælg type--</option>
<option value="textonly" SELECTED>Tekst</option>
<option value="textandfieldfree">Tekst + frittekst felt (maks 50 tegn)</option>
<option value="textandfieldnum">Tekst + numerisk felt (maks 10 tegn)</option>
<option value="textandfielddynvalue">Tekst + DB value felt (maks 50 tegn)</option>
</select>
</div>
<div class="form-group col-md-2 add_del_btn_outer text-right">
<button type="button" class="btn btn-light btn btn-sm add_node_btn_frm_field_IT_Email" data-toggle="tooltip" data-html="true" title="Kopier til nyt felt">
<i class="far fa-copy fa-sm"></i>
</button>
<button type="button" class="btn btn-danger btn-sm remove_node_btn_frm_field_IT_Email" data-toggle="tooltip" data-html="true" title="Slet felt">
<i class="fas fa-trash-alt fa-sm"></i>
</button>
</div>
</div>
</div>
</div>
<div class="col-md-12 p-1">
<div class="col-md-12 form_field_outer_IT_Email p-0">
<div class="row form_field_outer_row_IT_Email">
<div class="form-group col-md-6">
<input type="text" class="form-control form-control-sm" name="IT_Email_field_text[]" id="IT_Email_field_text_2" placeholder="Skriv teksten for opgaven" value="Anden opgave" required />
</div>
<div class="form-group col-md-4">
<select name="IT_Email_field_type[]" id="IT_Email_field_type_2" class="form-control form-control-sm select bg-white" required>
<option>--Vælg type--</option>
<option value="textonly">Tekst</option>
<option value="textandfieldfree" SELECTED>Tekst + frittekst felt (maks 50 tegn)</option>
<option value="textandfieldnum">Tekst + numerisk felt (maks 10 tegn)</option>
<option value="textandfielddynvalue">Tekst + DB value felt (maks 50 tegn)</option>
</select>
</div>
<div class="form-group col-md-2 add_del_btn_outer text-right">
<button type="button" class="btn btn-light btn btn-sm add_node_btn_frm_field_IT_Email" data-toggle="tooltip" data-html="true" title="Kopier til nyt felt">
<i class="far fa-copy fa-sm"></i>
</button>
<button type="button" class="btn btn-danger btn-sm remove_node_btn_frm_field_IT_Email" data-toggle="tooltip" data-html="true" title="Slet felt">
<i class="fas fa-trash-alt fa-sm"></i>
</button>
</div>
</div>
</div>
</div>
<div class="col-md-12 p-1">
<div class="col-md-12 form_field_outer_IT_Email p-0">
<div class="row form_field_outer_row_IT_Email">
<div class="form-group col-md-6">
<input type="text" class="form-control form-control-sm" name="IT_Email_field_text[]" id="IT_Email_field_text_3" placeholder="Skriv teksten for opgaven" value="Tredie opgave" required />
</div>
<div class="form-group col-md-4">
<select name="IT_Email_field_type[]" id="IT_Email_field_type_3" class="form-control form-control-sm select bg-white" required>
<option>--Vælg type--</option>
<option value="textonly">Tekst</option>
<option value="textandfieldfree">Tekst + frittekst felt (maks 50 tegn)</option>
<option value="textandfieldnum" SELECTED>Tekst + numerisk felt (maks 10 tegn)</option>
<option value="textandfielddynvalue">Tekst + DB value felt (maks 50 tegn)</option>
</select>
</div>
<div class="form-group col-md-2 add_del_btn_outer text-right">
<button type="button" class="btn btn-light btn btn-sm add_node_btn_frm_field_IT_Email" data-toggle="tooltip" data-html="true" title="Kopier til nyt felt">
<i class="far fa-copy fa-sm"></i>
</button>
<button type="button" class="btn btn-danger btn-sm remove_node_btn_frm_field_IT_Email" data-toggle="tooltip" data-html="true" title="Slet felt">
<i class="fas fa-trash-alt fa-sm"></i>
</button>
</div>
</div>
</div>
</div>
<div class="col-md-12 p-1">
<div class="col-md-12 form_field_outer_IT_Email p-0">
<div class="row form_field_outer_row_IT_Email">
<div class="form-group col-md-6">
<input type="text" class="form-control form-control-sm" name="IT_Email_field_text[]" id="IT_Email_field_text_4" placeholder="Skriv teksten for opgaven" value="Fjerde opgave" required />
</div>
<div class="form-group col-md-4">
<select name="IT_Email_field_type[]" id="IT_Email_field_type_4" class="form-control form-control-sm select bg-white" required>
<option>--Vælg type--</option>
<option value="textonly">Tekst</option>
<option value="textandfieldfree">Tekst + frittekst felt (maks 50 tegn)</option>
<option value="textandfieldnum">Tekst + numerisk felt (maks 10 tegn)</option>
<option value="textandfielddynvalue" SELECTED>Tekst + DB value felt (maks 50 tegn)</option>
</select>
</div>
<div class="form-group col-md-2 add_del_btn_outer text-right">
<button type="button" class="btn btn-light btn btn-sm add_node_btn_frm_field_IT_Email" data-toggle="tooltip" data-html="true" title="Kopier til nyt felt">
<i class="far fa-copy fa-sm"></i>
</button>
<button type="button" class="btn btn-danger btn-sm remove_node_btn_frm_field_IT_Email" data-toggle="tooltip" data-html="true" title="Slet felt">
<i class="fas fa-trash-alt fa-sm"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="container py-3">
<div class="row">
<div class="col">
<button type="button" class="btn btn-light btn-rounded py-0 add_new_frm_field_btn_IT_Email" data-toggle="tooltip" data-html="true" title="Tilføj nyt felt"><i class="fas fa-plus add_icon"></i> Add row</button>
</div>
<div class="col text-right" align="right">
<button type="submit" form="InsertSettingsFlowcontactFields_IT_Email_Form" id="InsertSettingsFlowcontactFields_IT_Email_Btn" class="btn btn-primary btn-rounded py-1" data-toggle="tooltip" data-html="true" title="Gem ovenstående Opgave Felter"><i class="far fa-save"></i> Gem Opgave Felter</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<br>
<br>推荐阅读
- javascript - Apps Script Checkbox True/False 在两张纸之间复制，这种逻辑可能吗？
- reactjs - 加载屏幕显示时如何隐藏/显示所有反应组件？
- java - 在 Spring Boot 中为同一包创建多个日志级别
- reactjs - 在 React 中使用外部 API 获取 CORS 问题
- hadoop - 在 M1 macOS 上安装 Cloudera 快速启动 VM
- node.js - Sequelize Raw Query 不适用于 express
- postgresql - 向 Prisma 3 添加许多关系字段
- oracle - 无法读取 run_service.sh / run_service.bat
- laravel - Laravel Eloquent：如何形成“2 Select database”来执行计数？
- python - 将所有链接的 Xpath 转换为泛型