javascript - 使用另一个输入值编辑输入值

Question

如您所见，我可以通过单击按钮动态创建输入，我也可以通过单击删除按钮删除它们，它只会删除删除按钮旁边的输入，而不是每个输入。考虑到这个想法，我创建了一个编辑按钮，我试图通过另一个输入来编辑输入。到目前为止，它几乎可以正常工作，当用户单击编辑按钮时，最近输入的值转到页面最顶部的输入，我可以更改那里的值，然后单击提交，初始输入的值更改为我在编辑输入中输入的最新值(输入在最上面)。

问题:执行这些步骤以查看问题

1. 添加 3 个新输入。
2. 第一个输入 1，第二个输入 2，第三个输入 3
3. 点击第三个输入上的编辑，值转到顶部输入，然后在顶部输入上键入“c”并单击提交，您可以看到第三个输入上的值更改为 c，到目前为止一切正常。
4. 现在点击 edit on 2nd input 并将最上面的输入更改为“b”，然后点击 submit。如您所见，现在第二个和第三个输入已更改为“b”，而不是仅更改第二个输入。

我认为当有更多的输入时，它会混淆“this”。我该如何解决这个问题。

$(document).ready(function() {
  var max_fields = 100; //maximum input boxes allowed
  var wrapper = $(".input_fields_wrap"); //Fields wrapper
  var add_button = $(".add_field_button"); //Add button ID
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (wrapper.find("input").length < max_fields) {
      //max input box allowed
      $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a><button class="edit-icon">Edit</button></div>'); //add input box
    }
  });
  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).parent('div').remove();
  })
  $(wrapper).on('click', '.edit-icon', function(e) {
    console.log($(this));
    e.preventDefault();
    //var remove_target = $(this).closest('div')
    var target = $(this).closest('div').find('input');
    var edit_name = target.val();
    $('.editinput').val(edit_name);
    $('.editinputsubmit').click(function() {
      console.log("click working");
      target.val($('.editinput').val());
    })
  });
});

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<div>
  <input type="text" class="editinput">
  <button class="editinputsubmit">submit</button>
</div>
<hr>
<div class="input_fields_wrap">
  <button class="add_field_button">Add More Fields</button>
</div>

Answer 1

您不应该像使用 $('.editinputsubmit').click... 那样在另一个事件处理程序中创建事件处理程序。点击处理程序将不断地在 '.editinputsubmit' 上一遍又一遍地绑定(bind)。将它移到外面并使用一个类来指定您正在编辑的输入。 Here is a working JSFiddle example .