如何制作将按钮绑定到相同功能的功能

Question

see jsfiddle

我重新发布此内容是因为我可能没有正确描述此内容。 我正在尝试向表单中的表格添加一个按钮，以创建一个新行以供输入，并且在新行的末尾，它应该显示另一个按钮来插入另一行，依此类推。

我尝试通过在创建行时从自身调用函数来添加新按钮并隐藏前一个按钮来实现这一点。

这是我的实际代码

  if(!$('input[name="addressee\\[line3\\]"').length) {
    add_button(3);
  } else if (!$('input[name="addressee\\[line4\\]"').length) {
    add_button(4);
  }

  function add_button(number) {
    let btn = $('<input/>', {
      'type': 'button',
      'value': 'add line',
      'data-number': number,
      'on': {
        click: function() {
          let row  = $('<tr><td><label for="line' + number + '">Addresse(suite)</label></td><td><input name="line' + number + '" style="width: 300px"/></td></tr>');
          $('input[name="addressee\\[line' + (number - 1) + '\\]"').closest('tr').after(row);
          if ($(this).data('number') == '3') {
            add_button(4);
          }
          $(this).hide();
        }
      }
    });
    $('input[name="addressee\\[line' + (number - 1) + '\\]"').after(btn);
  }

这里是 HTML，它只是一个简单的表格

<table>
    <tr>
      <td>
        <label for="line2">Adresse</label>
      </td>
     <td>
       <input type="text" name="addressee[line2]" value="250 rue des granges" style="width: 300px"><br>          
     </td>
    </tr>
</table>

它创建了第一行，但按钮在创建时没有显示在第二行。

see jsfiddle

我尝试了很多东西，但这是我设法得到的最好的。

Answer 1

当您在单击按钮时设置下一个功能时，请注意您的 add_button 功能

function add_button(number) {
  let btn = $('<input/>', {
    'type': 'button',
    'value': 'add line',
    'data-number': number,
    'on': {
      click: function() {

        // \/ HERE YOU DON'T SET "addressee[line..]" BUT JUST "line" ON THE NAME OF THE INPUT

        let row  = $('<tr><td><label for="line' + number + '">Addresse(suite)</label></td><td><input name="line' + number + '" style="width: 300px"/></td></tr>');

        // /\

        $('input[name="addressee\\[line' + (number - 1) + '\\]"').closest('tr').after(row);
        if ($(this).data('number') == '3') {
          add_button(4);
        }
        $(this).hide();
      }
    }
  });
  $('input[name="addressee\\[line' + (number - 1) + '\\]"').after(btn);
}