在下面的代碼段中,我能夠動態添加更多行,如果沒有從服務器端代碼加載行,則可以完美運行,但是如果我最初從服務器端代碼加載了 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 >
<div >
<div >
<div >
<input type="text" name="IT_Email_field_text[]" id="IT_Email_field_text_${index}" placeholder="Skriv teksten for opgaven" value="" required />
</div>
<div >
<select name="IT_Email_field_type[]" id="IT_Email_field_type_${index}" 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 >
<button type="button" data-toggle="tooltip" data-html="true" title="Kopier til nyt felt">
<i ></i>
</button>
<button type="button" data-toggle="tooltip" data-html="true" title="Slet felt">
<i ></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>
uj5u.com熱心網友回復:
違規行是這樣的:
$(".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 >
<div >
<div >
<div >
<input type="text" name="IT_Email_field_text[]" id="IT_Email_field_text_${index}" placeholder="Skriv teksten for opgaven" value="" required />
</div>
<div >
<select name="IT_Email_field_type[]" id="IT_Email_field_type_${index}" 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 >
<button type="button" data-toggle="tooltip" data-html="true" title="Kopier til nyt felt">
<i ></i>
</button>
<button type="button" data-toggle="tooltip" data-html="true" title="Slet felt">
<i ></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>
轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/334630.html
標籤:查询
