如何通过获取 div 父类而不是输入来触发答案

【问题标题】：How to trigger by taking div parent class instead of input如何通过获取 div 父类而不是输入来触发
【发布时间】：2020-12-10 10:26:01
【问题描述】：

这是我的表单和脚本，其中数据是从输入名称触发的。我想在 div 类有 kg 而不是输入名称的情况下触发这个函数

我该怎么做？

$(document).on('change paste keyup', "input[name='kg[]']", function() {
  updatedynamicprice($(this));
});

function updatedynamicprice(selector) {
  let kg = $("input[name='kg[]']").val();
  let total_price = 100 * kg;
  $("input[name='price[]']").val(total_price);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="kg">
  <input type="number" name="kg[]" id="input-kg" class="form-control">
</div>
<div class="form-controller">
  <input type="number" name="price[]" id="input-kg" class="form-control">
</div>

【问题讨论】：

我给你做了一个sn-p。请添加相关脚本和 HTML。例如updatedynamicprice 丢失
A div 没有 'change'、'paste' 或 'keyup' 事件。除非你使用contentEditable。例如：jsfiddle.net/n4cL1ybk
@Turnip 好的，那么我们可以将事件用于输入类型名称，仅用于父类具有 div class="kg"
$(document).on('change paste keyup', ".kg input", function() { updatedynamicprice($(this)); });
为什么不在表单级别这样做？

标签： jquery

【解决方案1】：

使用最近的和容器导航

提供可以重复使用的类

$(document).on('change paste keyup', function(e) {
  const $parent = $(e.target).closest(".container");
  let qty = $(".qty",$parent).val();
  let total_price = 100 * qty;
  $(".price",$parent).val(total_price);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="kg">
    <input type="number" name="kg[]" class="qty" class="form-control">
  </div>
  <div class="form-controller">
    <input type="number" name="price[]" class="price" class="form-control">
  </div>
</div>
<hr/>
<div class="container">
  <div class="pounds">
    <input type="number" name="pounds[]" class="qty" class="form-control">
  </div>
  <div class="form-controller">
    <input type="number" name="price[]" class="price" class="form-control">
  </div>
</div>

【讨论】：