javascript - 带有部分的动态表单仅将字段添加到最后一个部分

Question

我正在尝试通过按下按钮将表单添加到 html 文档中。到目前为止，我得到了这个...

var sids = 0;
var fids = 0;

function newSection() {
    sids = sids + 1;
    let id = "#" + sids + "sectionDiv";
    $('#formdiv').append("<div id='" + sids + "sec'><label><input class='form-control m-2' type='text' id='" + sids +"title' name='" + sids +"sectionTitle' placeholder='Section title'></label><label><input class='form-control m-2' id='" + sids +"desc' name='" + sids +"sectionDesc' type='text' placeholder='Section description'></label><br><div class='container' id='" + sids + "sectionDiv'></div> <br><button class='btn btn-primary' type='button' onclick='newField(sids)'>New Field</button><hr><br></div>");
}

function newField(sectionID) {
    fids = fids + 1;
    console.log(sectionID);
    $('#' + sectionID +'sectionDiv').append("<div id='" + fids +"field'><label><input class='form-control m-2 " + sids + "," + fids + "title' type='text' name='" + fids +"fieldTitle' placeholder='Field title'></label><label><input class='form-control m-2 " + sids + "," + fids + "desc' name='" + fids +"fieldDesc' type='text' placeholder='Field description'></label><label><select class='form-control m-2 " + sids + "," + fids + "type' name='" + fids +"fieldType'><option value='num'>Number Grade (1 - 10)</option><option value='let'>Letter Grade (A* - U)</option></select></label><br></div>")
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="formdiv"><div>
<button onclick="newSection()">newSection</button> 

我遇到的问题是，当我创建一个新部分时，它上面的“新字段”按钮会将字段添加到最后一个部分，而不是新部分。我知道这是因为我将变量传递给按钮上的函数。

我怎么能动态地绕过它？

谢谢 ：）

标签： javascripthtmljquery

Answer 1

你可以像这样修复它：

将类添加newField到您的按钮并删除onclick事件。

将 id 添加到您的按钮：id='" + sids + "button'.

然后将点击事件委托给具有类的任何元素#formdiv（您这样做是因为formdiv已经在 DOM 中）newField：

$('#formdiv').on('click', '.newField', function() {

然后您可以在单击时获取单击的按钮 ID 并保存它，也可以调用您的添加函数：

var id=""

$('#formdiv').on('click', '.newField', function() {
  id=this.id;
  id=id.replace("button", "");
  //console.clear();
  console.log(id);  
  newField();
});

现在添加新的文件是点击 id：

$('#' + id +'sectionDiv').append

将元素添加到 DOM 和单击事件时出现了一些问题，无法弄清楚究竟是什么。但这就是为什么我不得不将 click 委托给 formdiv.

var sids = 0;
var fids = 0;

function newSection() {
    sids = sids + 1;
    let id = "#" + sids + "sectionDiv";
    $('#formdiv').append("<div id='" + sids + "sec'><label><input class='form-control m-2' type='text' id='" + sids +"title' name='" + sids +"sectionTitle' placeholder='Section title'></label><label><input class='form-control m-2' id='" + sids +"desc' name='" + sids +"sectionDesc' type='text' placeholder='Section description'></label><br><div class='container' id='" + sids + "sectionDiv'></div> <br><button class='btn btn-primary newField' type='button'  id='" + sids + "button'>New Field</button><hr><br></div>");
}

var id=""

$('#formdiv').on('click', '.newField', function() {
  id=this.id;
  id=id.replace("button", "");
  console.clear();
  console.log(id);  
  newField();
});


function newField() {
    fids = fids + 1; 
    $('#' + id +'sectionDiv').append("<div id='" + fids +"field'><label><input class='form-control m-2 " + sids + "," + fids + "title' type='text' name='" + fids +"fieldTitle' placeholder='Field title'></label><label><input class='form-control m-2 " + sids + "," + fids + "desc' name='" + fids +"fieldDesc' type='text' placeholder='Field description'></label><label><select class='form-control m-2 " + sids + "," + fids + "type' name='" + fids +"fieldType'><option value='num'>Number Grade (1 - 10)</option><option value='let'>Letter Grade (A* - U)</option></select></label><br></div>")
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="formdiv">
  <div>
    <button onclick="newSection()">newSection</button>