This question has already been answered:

On the page there is a pack of dynamic inputs, they can be from 0 to 90 pieces. Appear on the page from the results of ajax request to the server. They look like this:

 <input required type="number" min="0" class="form-control insel settings-input" value="25" data-skim-level="min" data-key="qty" data-denom-key="5">

They have a blur handler on them, it looks like this:

 $('#skimming-level-tab').on('blur','.settings-input',function () { var skimming_level_data = $(this).data('skim-level'); var qtyOrValue_data = $(this).data('key'); var denomKey_data = $(this).data('denom-key'); var dependentInput, insertedValue; if (qtyOrValue_data === 'qty') { dependentInput = $("[data-skim-level='"+ skimming_level_data +"'][data-denom-key='"+ denomKey_data +"'][data-key='value']"); insertedValue = ($(this).val()/100)*parseInt(denomKey_data, 10); } else { dependentInput = $("[data-skim-level='"+ skimming_level_data +"'][data-denom-key='"+ denomKey_data +"'][data-key='qty']"); insertedValue = ($(this).val()*100)/parseInt(denomKey_data, 10); } dependentInput.val(insertedValue); var minInput = $("[data-skim-level='min'][data-denom-key='"+ denomKey_data +"'][data-key='value']"); var skimInput = $("[data-skim-level='skim'][data-denom-key='"+ denomKey_data +"'][data-key='value']"); var maxInput = $("[data-skim-level='max'][data-denom-key='"+ denomKey_data +"'][data-key='value']"); if(validateInputs(minInput, skimInput, maxInput)) { return } else { alert('Error'); } });

Now the question is: why does the alert pop up more than 1 time, at the same time, if we replace the alert on console.log , it works 1 time?
To be precise, exactly as many times as there are inputs on the page at the moment.

Reported as a duplicate at Grundy. javascript Jan 4 '18 at 15:11 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

  • And by whom # skimming-level-tab have these dynamic inputs? - Kirill Korushkin 2:49 pm
  • @KirillKorushkin Dad / Mom account. - Klimenkomud
  • try replacing alert on console.log - Grundy
  • @Grundy - and this explains: "as many times as there are inputs on the page at the moment"? - Igor
  • @Grundy But console.log works only once - Klimenkomud

2 answers 2

I think I need to check currentTarget

  if(event.currentTarget !== this ) { return; }
  • No, it is not necessary (1 character is needed ...) - Igor

<телепатия>

Appear on the page from the results of ajax query
...
as many times as on the page at the moment

Because you are calling code

 $('#skimming-level-tab').on('blur','.settings-input',function () { ... });

and, thus, you hang up a new handler every time you create a new input.

</телепатия>

How to avoid such behavior?

So. I would like us to first make sure that my explanation is correct. Put some alert or consoloe.log just before calling on :

 alert("attaching blur handler"); $('#skimming-level-tab').on('blur','.settings-input',function () {
  • $('#skimming-level-tab').on('blur','.settings-input',function () { ... }); runs once, in $(document).ready(function(){ ... }); . - Klimenkomud
  • one
    @Klimenkomud This does not correspond to the behavior described in the question. You do not notice something in your code. Create an example that reproduces the observed phenomenon. - Igor
  • From your words, it turns out that each time a new event handler is hung up? How to avoid such behavior? - Klimenkomud
  • @Klimenkomud look addition in response - Igor
  • Before calling .on alert crashes 1 time. - Klimenkomud