select 带有 jquery 的单个附加输入

Question

我有一行输入是从一个按钮动态附加的。第一个输入连接到由数据库中的 php 填充的 <datalist>。当我从列表中单击这些项目之一时，它会提取该特定项目的价格信息，我需要它自动用该价格填充下一个输入。我可以alert("value.price");就好了，但是想不出办法select只有对应的<input>。如果我使用 .class，它将 select 所有动态生成的输入与 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();
  });
});

如您所见，我正在附加一行 bootstrap 列和该行的删除按钮。但是我如何 select 仅输入 class = "price_class" 并且仅针对该特定行？

这个：

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

是我需要显示价格的地方。

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

在我的代码片段中：

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

但它应该更接近于：

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

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

Answer 1

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

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

select 带有 jquery 的单个附加输入

select a single appended input with jquery

jquery

append

jquery-selectors