我陷入了jquery方法.text（）的困扰，我有多个输入字段（<= 10），如果要更改值，我也会使用该方法更改元素的内容，我的意思是.text（ ） 方法。每个输入都有自己的元素，用于显示输入的变化。问题是，如果我已经更改了> 7个值输入字段，并且转到下一个输入（第8个），我将延迟单击页面。 Im使用map()处理每个元素事件。 / p>
$('#tetap-data').on('DOMSubtreeModified', function(event) {
let inputHarga = $('.input-harga')
let volume = $('.volume-tetap')
let nilaiAwal = $('.nilai-awal')
$.map(inputHarga, (val, i) => {
// setNilaiAwal(`input#${val.id}`, volume[i].value, `small#${nilaiAwal[i].id}`)
$("body").delegate(`input#${val.id}`, 'change', function() {
let value = $(this).val() * volume[i].value
value = value.toLocaleString('id-ID')
$(`small#${nilaiAwal[i].id}`).text(`Rp ${value},-`)
// console.log(value)
})
})
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tetap-data" class="mt-3">
<div class="form-group row">
<label for="cangkul" class="col-sm-3 col-form-label col-form-label-sm label-tetap">Cangkul 4 buah</label>
<input type="hidden" class="volume-tetap" value="4">
<div class="col-sm-2">
<input type="number" class="form-control form-control-sm input-harga" id="cangkul" name="cangkul" placeholder="Harga prediksi">
</div>
<div class="col-sm-2">
<small class="nilai-awal" id="nilai-cangkul">Rp 0,-</small>
</div>
<div class="col-sm-3">
<input type="number" class="form-control form-control-sm input-bulan" id="bulan-cangkul" name="cangkul" placeholder="Jumlah bulan">
</div>
<div class="col-sm-2">
<small id="biaya-tetap-cangkul">Rp 0,-</small>
</div>
</div>
<div class="form-group row">
<label for="gembor" class="col-sm-3 col-form-label col-form-label-sm label-tetap">Gembor 8 buah</label>
<input type="hidden" class="volume-tetap" value="8">
<div class="col-sm-2">
<input type="number" class="form-control form-control-sm input-harga" id="gembor" name="gembor" placeholder="Harga prediksi">
</div>
<div class="col-sm-2">
<small class="nilai-awal" id="nilai-gembor">Rp 0,-</small>
</div>
<div class="col-sm-3">
<input type="number" class="form-control form-control-sm input-bulan" id="bulan-gembor" name="gembor" placeholder="Jumlah bulan">
</div>
<div class="col-sm-2">
<small id="biaya-tetap-gembor">Rp 0,-</small>
</div>
</div>
<div class="form-group row">
<label for="emberplastik" class="col-sm-3 col-form-label col-form-label-sm label-tetap">Ember plastik 10 buah</label>
<input type="hidden" class="volume-tetap" value="10">
<div class="col-sm-2">
<input type="number" class="form-control form-control-sm input-harga" id="emberplastik" name="emberplastik" placeholder="Harga prediksi">
</div>
<div class="col-sm-2">
<small class="nilai-awal" id="nilai-emberplastik">Rp 0,-</small>
</div>
<div class="col-sm-3">
<input type="number" class="form-control form-control-sm input-bulan" id="bulan-emberplastik" name="emberplastik" placeholder="Jumlah bulan">
</div>
<div class="col-sm-2">
<small id="biaya-tetap-emberplastik">Rp 0,-</small>
</div>
</div>
<div class="form-group row">
<label for="bambugaru" class="col-sm-3 col-form-label col-form-label-sm label-tetap">Bambu garu 4 buah</label>
<input type="hidden" class="volume-tetap" value="4">
<div class="col-sm-2">
<input type="number" class="form-control form-control-sm input-harga" id="bambugaru" name="bambugaru" placeholder="Harga prediksi">
</div>
<div class="col-sm-2">
<small class="nilai-awal" id="nilai-bambugaru">Rp 0,-</small>
</div>
<div class="col-sm-3">
<input type="number" class="form-control form-control-sm input-bulan" id="bulan-bambugaru" name="bambugaru" placeholder="Jumlah bulan">
</div>
<div class="col-sm-2">
<small id="biaya-tetap-bambugaru">Rp 0,-</small>
</div>
</div>
<div class="form-group row">
<label for="koredcangkulkecil" class="col-sm-3 col-form-label col-form-label-sm label-tetap">Kored (cangkul kecil) 4 buah</label>
<input type="hidden" class="volume-tetap" value="4">
<div class="col-sm-2">
<input type="number" class="form-control form-control-sm input-harga" id="koredcangkulkecil" name="koredcangkulkecil" placeholder="Harga prediksi">
</div>
<div class="col-sm-2">
<small class="nilai-awal" id="nilai-koredcangkulkecil">Rp 0,-</small>
</div>
<div class="col-sm-3">
<input type="number" class="form-control form-control-sm input-bulan" id="bulan-koredcangkulkecil" name="koredcangkulkecil" placeholder="Jumlah bulan">
</div>
<div class="col-sm-2">
<small id="biaya-tetap-koredcangkulkecil">Rp 0,-</small>
</div>
</div>
<div class="form-group row">
<label for="sprayer" class="col-sm-3 col-form-label col-form-label-sm label-tetap">Sprayer 2 buah</label>
<input type="hidden" class="volume-tetap" value="2">
<div class="col-sm-2">
<input type="number" class="form-control form-control-sm input-harga" id="sprayer" name="sprayer" placeholder="Harga prediksi">
</div>
<div class="col-sm-2">
<small class="nilai-awal" id="nilai-sprayer">Rp 0,-</small>
</div>
<div class="col-sm-3">
<input type="number" class="form-control form-control-sm input-bulan" id="bulan-sprayer" name="sprayer" placeholder="Jumlah bulan">
</div>
<div class="col-sm-2">
<small id="biaya-tetap-sprayer">Rp 0,-</small>
</div>
</div>
<div class="form-group row">
<label for="boxpanen" class="col-sm-3 col-form-label col-form-label-sm label-tetap">Box panen 8 buah</label>
<input type="hidden" class="volume-tetap" value="8">
<div class="col-sm-2">
<input type="number" class="form-control form-control-sm input-harga" id="boxpanen" name="boxpanen" placeholder="Harga prediksi">
</div>
<div class="col-sm-2">
<small class="nilai-awal" id="nilai-boxpanen">Rp 0,-</small>
</div>
<div class="col-sm-3">
<input type="number" class="form-control form-control-sm input-bulan" id="bulan-boxpanen" name="boxpanen" placeholder="Jumlah bulan">
</div>
<div class="col-sm-2">
<small id="biaya-tetap-boxpanen">Rp 0,-</small>
</div>
</div>
<div class="form-group row">
<label for="timbangan" class="col-sm-3 col-form-label col-form-label-sm label-tetap">timbangan 1 buah</label>
<input type="hidden" class="volume-tetap" value="1">
<div class="col-sm-2">
<input type="number" class="form-control form-control-sm input-harga" id="timbangan" name="timbangan" placeholder="Harga prediksi">
</div>
<div class="col-sm-2">
<small class="nilai-awal" id="nilai-timbangan">Rp 0,-</small>
</div>
<div class="col-sm-3">
<input type="number" class="form-control form-control-sm input-bulan" id="bulan-timbangan" name="timbangan" placeholder="Jumlah bulan">
</div>
<div class="col-sm-2">
<small id="biaya-tetap-timbangan">Rp 0,-</small>
</div>
</div>
<div class="form-group row">
<label for="pisau" class="col-sm-3 col-form-label col-form-label-sm label-tetap">pisau 4 buah</label>
<input type="hidden" class="volume-tetap" value="4">
<div class="col-sm-2">
<input type="number" class="form-control form-control-sm input-harga" id="pisau" name="pisau" placeholder="Harga prediksi">
</div>
<div class="col-sm-2">
<small class="nilai-awal" id="nilai-pisau">Rp 0,-</small>
</div>
<div class="col-sm-3">
<input type="number" class="form-control form-control-sm input-bulan" id="bulan-pisau" name="pisau" placeholder="Jumlah bulan">
</div>
<div class="col-sm-2">
<small id="biaya-tetap-pisau">Rp 0,-</small>
</div>
</div>
<div class="form-group row">
<label for="nilaisewalahan" class="col-sm-3 col-form-label col-form-label-sm label-tetap">Nilai sewa lahan 1 Rp/Ha</label>
<input type="hidden" class="volume-tetap" value="1">
<div class="col-sm-2">
<input type="number" class="form-control form-control-sm input-harga" id="nilaisewalahan" name="nilaisewalahan" placeholder="Harga prediksi">
</div>
<div class="col-sm-2">
<small class="nilai-awal" id="nilai-nilaisewalahan">Rp 0,-</small>
</div>
<div class="col-sm-3">
<input type="number" class="form-control form-control-sm input-bulan" id="bulan-nilaisewalahan" name="nilaisewalahan" placeholder="Jumlah bulan">
</div>
<div class="col-sm-2">
<small id="biaya-tetap-nilaisewalahan">Rp 0,-</small>
</div>
</div>
</div>
该表单出现在单击按钮之后，这就是为什么我使用了 DOMSubtreeModified