javascript - 包含动态元素的 div 后的按钮，没有触摸 HTML

Question

我需要帮助。我有这段代码，我必须在最后放置一个保存按钮来存储更改或数据库中的新条目。我有一个问题，我不知道如何在不更改 HTML 代码的情况下将按钮放在最后，因为我不能，我想通过 javascript 插入按钮，我该怎么办？ps：问题是我无法插入这些函数，因为每次按下按钮时都会调用此处的函数，如果再按下一次则调用另一次，然后再调用一次。p.s2：告诉我代码是否正常，否则告诉我如何改进谢谢

$().ready(function() {

  //Creation of array to simulate data from DB
  var obj1 = 
  {
    id: "1",
    name: "Bryan",
    surname: "Del Bianco"
  };
  
  var obj2 = 
  {
    id: "2",
    name: "Luca",
    surname: "Del Bianco"
  };
  
  var exampleOfDatabase = new Array();
  exampleOfDatabase.push(obj1);
  exampleOfDatabase.push(obj2)


  visualizzaModifica(exampleOfDatabase, $("#divTeamLeaderProduzione"))

  function visualizzaModifica(array, div)
  {
    div.html("");
    div.append("<br>");

    let i = 1;

    array.forEach(function(e) {
      div.append(
        "<div id='div" + i + "' class='input-group'>" +
        "<input type='text' id='inputModificaNome" + i + "' class='form-control'                                    value='" + e.name + "'>" +

        "<input type='text' id='inputModificaCellulare" + i + "' class='form-control'                                value='" + e.surname + "'>" +
        "</div>"
      );

      i++;
    });

    aggiungiInput(i, div);

  }
  
  function aggiungiInput(i,div)
    {
        if($("#div"+i).length == 0)
        {
            var next = $("<div>",
                {
                    id: 'div'+i,
                    class: 'input-group'
                });

            var inputNome = $('<input>',
                {
                    id: 'inputModificaNome'+i,
                    type: 'text',
                    class: 'form-control'
                });

            var inputCellulare = $('<input>',
                {
                    id: "inputModificaCellulare"+i,
                    type: 'text',
                    class: 'form-control'
                });

            next.on('change', function ()
            {
               aggiungiInput(i+1, div);
            });

            next.append(inputNome);
            next.append(inputCellulare);
            div.append(next);
        }
    }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divTeamLeaderProduzione">

</div>

标签： javascriptjquery

Answer 1

$().ready(function() {

  //Creation of array to simulate data from DB
  var obj1 = 
  {
    id: "1",
    name: "Bryan",
    surname: "Del Bianco"
  };
  
  var obj2 = 
  {
    id: "2",
    name: "Luca",
    surname: "Del Bianco"
  };
  
  var exampleOfDatabase = new Array();
  exampleOfDatabase.push(obj1);
  exampleOfDatabase.push(obj2)


  visualizzaModifica(exampleOfDatabase, $("#divTeamLeaderProduzione"))

  function visualizzaModifica(array, div)
  {
    div.html("");
    div.append("<br>");

    let i = 1;

    array.forEach(function(e) {
      div.append(
        "<div id='div" + i + "' class='input-group'>" +
        "<input type='text' id='inputModificaNome" + i + "' class='form-control'                                    value='" + e.name + "'>" +

        "<input type='text' id='inputModificaCellulare" + i + "' class='form-control'                                value='" + e.surname + "'>" +
        "</div>"
      );

      i++;
    });

    aggiungiInput(i, div);
  }
  
  function aggiungiInput(i,div)
    {
        if($("#div"+i).length == 0)
        {
            var next = $("<div>",
                {
                    id: 'div'+i,
                    class: 'input-group'
                });

            var inputNome = $('<input>',
                {
                    id: 'inputModificaNome'+i,
                    type: 'text',
                    class: 'form-control'
                });

            var inputCellulare = $('<input>',
                {
                    id: "inputModificaCellulare"+i,
                    type: 'text',
                    class: 'form-control'
                });

            next.on('change', function ()
            {
               aggiungiInput(i+1, div);
            });

            next.append(inputNome);
            next.append(inputCellulare);
            div.append(next);
        }
        $("#btnSave").remove();
        div.append("<input type='button' value='Save' id='btnSave' />");
    }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divTeamLeaderProduzione">

</div> 

我删除了按钮并在需要时放置它。希望能帮助到你。干杯..！！