Question

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

问题：执行以下步骤以查看问题

添加3个新输入。
第一个输入输入1，第二个输入2，第三个输入
点击第三个输入上的编辑，值转到顶部输入，然后输入＆＃39; c＆＃39;在顶部输入并单击提交，因为您可以看到第3个输入的值更改为c，到目前为止很好。
现在点击第二个输入上的编辑，然后将输入更改为＆＃39; b＆＃39;在最顶层输入并单击提交。正如您所看到的，现在第2和第3个输入改为＆＃39; b＆＃39;而不是仅改变第2个输入。

我认为这令人困惑的是这个＆＃39;当比赛中有更多输入时。我该如何解决这个问题。

＆＃13;

$(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());
    })
  });
});

＆＃13;

<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>

＆＃13;

Answer 1

您不应该像使用$('.editinputsubmit').click...那样在另一个事件处理程序中创建事件处理程序。然后，点击处理程序将在'.editinputsubmit'上反复绑定。将其移到外部并使用类指定要编辑的输入。 Here is a working JSFiddle example

使用其他输入值编辑输入值

1 个答案: