使用 jquery 选择单个附加输入

Question

我有一排从按钮动态附加的输入。第一个输入连接到由数据库中的 php 填充的 <datalist>。当我从列表中单击其中一个项目时，它会提取该特定项目的价格信息，我需要它自动使用该价格填充下一个输入。我可以alert("value.price"); 很好，但想不出只选择相应的<input> 的方法。如果我使用.class，它将选择具有该类的所有动态生成的输入，并将所有项目的价格更改为该价格。显然，我只希望那一行中的一个输入改变。我可以通过使用closest 来使用我的删除脚本来做到这一点，但这不适用于行内的<input>。

这是我的脚本：

$(document).ready(function() {
  $('#new_line_btn').click(function() {
    $('#pricing').append('<div class = "row"><div class = "col-sm input_col"><input name = "part_input[]" class ="form-control part_class" list = "part_list"></div>'
      +
      '<div class = "col-sm"><div class = "input-group"><span class = "input-group-text">$</span><input class = "form-control price_class" name = "price[]" onchange = "this.value = Number (this.value).toFixed(2)"></div>'
      +
      '</div><div class = "col-sm"><div class = "input-group"><input class = "form-control"><button class = "btn btn-light btn-outline-secondary delete">x</button></div></div></div>');
  });

  $('#pricing').on("change", ":focus", function() {
    var value = $(this).val();
    var part_id = $('#part_list [value="' + value + '"]').data('id');
    $.ajax({
      url: 'invoice_array.php',
      method: 'POST',
      data: {
        part_id: part_id
      },
      dataType: 'JSON',
      success: function(data) {
        alert(value.price);
      }
    })
  });

  $("#pricing").on("click", ".delete", function() {
    $(this).closest("div[class = 'row']").remove();
  });
});

如您所见，我正在为该行附加一个带有引导列和一个删除按钮的行。但是我如何只选择带有class = "price_class" 的输入并且只选择该特定行？

这个：

<input class = "form-control price_class" name = "price[]" onchange = "this.value = Number (this.value).toFixed(2)">

是我需要价格出现的地方。

输入不是直接兄弟姐妹，我在类似主题上看到的唯一其他问题是关于 .on() 和在动态元素创建后选择，这不是我的问题。

在我的代码片段中：

success: function(data){                             
        alert(value.price);                                 
}

但它应该更接近：

    success: function(data){                                
        $('.price_class').val(value.price);                                 
    }

如何仅为该动态创建的行选择价格输入？ 谢谢

Answer 1

似乎您可以以类似的方式访问它，只需指定您要定位最后一个匹配的输入。

 $('#pricing').on("change", ":focus", function() {
    let _this = $(this)
    // ....
    success: function(data) {
      _this.closest('.row').find('input').last().val(data.price);
    }