CODEWITHSUNDEEP
javascripthtmljqueryaddeventlistenerdelegated-properties
Ebrahim Khalil Amid
Ebrahim Khalil Amid

Reputation: 426

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

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>

Upvotes: 1

Views: 1141

Answers (2)

Barn on a Hill
Barn on a Hill

Reputation: 387

Came across this question randomly, since it was a top Google result decided to answer it for posterity:

While I question the act of firing change events in this example, it adds more processing logic when we could probably just call whatever logic the event resolves instead, this answer to another question provides a thorough explanation of how we could create an event to fire for our inputs.

So with that context, here's how we could implement what OP is asking for with vanilla JS, the jQuery approach would be similar.

function dispatchInputChangeEvent(input)
{
    // Grabbed from the linked answer, there's a few approaches to this.
    input.dispatchEvent(new Event('change', { bubbles: true }));
}

// ...

// inside our execution block, jQuery ready or vanilla DOMContentLoaded for the question's example
document.getElementById('add-rand').addEventListener('click', e => 
{
    const bulkNumInputList = document.querySelectorAll('.bulk_number');
    bulkNumInputList.forEach(input => 
    {
        input.value = '' + 10; // random number here
        dispatchInputChangeEvent(input);
        /* Note: input text elements store their value as a string: 
         * input.value would need to be converted back to a number. 
         * The type of the input was never stated in the question. */
    });

});

Upvotes: -1

Cemil AKAN
Cemil AKAN

Reputation: 103

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>

Upvotes: 2

Related Questions