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>

Does this answer your question? [Trigger Change event when the Input value changed programmatically?](https://stackoverflow.com/questions/16250464/trigger-change-event-when-the-input-value-changed-programmatically) — Brian, Jun 24 '22 at 05:27
Nope... I mentioned that I'm Triggering an input field that is delegated by another wrapper. — Ebrahim Khalil Amid, Jun 26 '22 at 13:46

score 1 · Answer 1 · answered Jun 24 '22 at 08:09

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>

Is there any way to trigger a 'change' event listener if input value change dynamically?

1 Answers1