Is there any way to trigger a 'change' event listener if input value change dynamically?
Question
Suppose, I have a delegated input field with the class name ' bulk_number ' inside a parent class name ' all_bulk_inputs ', and a button that will add a random number to that input field whenever I click it. Now I want to trigger a change event listener whenever the number change.
For Example:
<!-- input field under all_bulk_inputs -->
<div class="all_bulk_inputs">
<input class="bulk_number" name="rand_number" /> <!-- dynamically added under the 'all_bulk_inputs' parent -->
</div>
<button id="add_rand">Add Random Number</button>
<script>
$('#add_rand').on('click', function(){
$('.bulk_number').val(10) //suppose, 10 is my random number
//what I want is forcefully trigger on change like bellow, if possible
$('.all_bulk_inputs').trigger('change', 'bulk_number', function(){
console.log('bulk number changed)
})
})
</script>
1 answers
solution1
0 2022-06-24 08:09:43
First of all you have an error in line log. There is a few way to do this but this is the simple one i have explained what does code with comments
console.log('bulk number changed)
then you may want to check document of change Change
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="all_bulk_inputs">
<input class="bulk_number" name="rand_number" /> <!-- dynamically added under the 'all_bulk_inputs' parent -->
</div>
<button id="add_rand">Add Random Number</button>
<script>
$(document).ready(function() {
//When random number setted to the input under all_bulk_inputs div below will triggered
$('.all_bulk_inputs .bulk_number').on('change', function() {
console.log(`bulk number changed and the value is ${$(this).val()}`)
})
$('#add_rand').on('click', function() {
// create between 0 and 100 number and set to input
const rnd = Math.floor(Math.random() * 100)
$('.bulk_number').val(rnd).change()
})
});
</script>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.