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>
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>