JavaScript oninput listener is not working unless I wait 1000 ms

25 Views Asked by At

This function below runs when the element with class blockUI disappears from frontend:

function auto_stock_sum_on_input() {
  var dad = $('.woocommerce_variations.wc-metaboxes.ui-sortable'); //it's just to identify easier the desired element
  var descendants = dad.find('.custom-variation-fields-container');
  descendants.on('input', function() { //adding a event listener to sum all input values from some children
    store_stock = $(this).find('.custom-field');
    stock_variation_sum = 0
    store_stock.each(function() { //summing values from such children
      stock_variation_sum = stock_variation_sum + parseInt($(this).val(), 10);
    });
    $(this).closest('.woocommerce_variation.wc-metabox').find('.short.wc_input_stock').val(stock_variation_sum); //storing the sum in this element
  });
}

The problem is the oninput event is just being detected if I wait 1 second (1000ms) after .blockUI element disappears.

I debbugged it by console.log, I found out even if descendants has input tags as children the oninput event is not triggered when user fills input with something, I must wait 1000ms after .blockUI element disappears to the event gets triggered. I also tried the boolean test onipunt is in there and returned true when not waiting 1000ms. I'd like the code runs fine without setting a time out. What can cause this issue?

PS: .blockUI is just a element to block UX when data is being fetch.

0

There are 0 best solutions below