title: Add event to all elements of a HTML input array and get the values in the array
body: <p>I have a row with 4 inputs:</p>
  
  <pre><code>&lt;div id="productRow1" class="productRow"&gt;
      &lt;input type="text" name="numbers[]"&gt;
      &lt;input type="number" name="quantities[]"&gt;
      &lt;input type="text" name="levels[]"&gt;
      &lt;input type="number" name="prices[]"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have an "Add Another Product" button and user can add another row by clicking that button. Generated row will be like this with the unique <code>div</code> <code>id</code>:</p>
  
  <pre><code>&lt;div id="productRow2" class="productRow"&gt;
      &lt;input type="text" name="numbers[]"&gt;
      &lt;input type="number" name="quantities[]"&gt;
      &lt;input type="text" name="levels[]"&gt;
      &lt;input type="number" name="prices[]"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have a wrapper div for all the rows like this:</p>
  
  <pre><code>&lt;div class="input_fields_wrap"&gt;
      &lt;div id="productRow1" class="productRow"&gt;...&lt;/div&gt;
      &lt;div id="productRow2" class="productRow"&gt;...&lt;/div&gt;
      ...
  &lt;/div&gt;
  </code></pre>
  
  <p>How I add new rows dynamically with the unique <code>div row id</code> when the "Add Another Product" button is clicked:</p>
  
  <pre><code>var wrapper = $(".input_fields_wrap");
  $(wrapper).append('&lt;div ' + divId + ' class="productRow"' + '&gt;
                  &lt;input type="text" name="numbers[]"/&gt;' +
                  '&lt;input type="number" name="quantities[]"/&gt;' +
                  '&lt;input type="text" name="levels[]"/&gt;' +
                  '&lt;input type="number" name="prices[]"/&gt;');
  </code></pre>
  
  <p>Also I have another text box which should show the total price instantly. So I need to get the price data of each row after each row's price is entered by user. I tried to add an event to all of my <code>prices[]</code> fields like this:</p>
  
  <pre><code>$(function () {
      $('input[name="prices[]"]').blur(function () {
          alert('testAlert');
      });
  });
  </code></pre>
  
  <p>But it didn't work. I also tried to add an <code>onblur</code> event to my existing and generated input fields to get the prices like this:</p>
  
  <pre><code>&lt;input type="number" name="prices[]" onblur="calculatePrice()"&gt;
  </code></pre>
  
  <p>with the function:</p>
  
  <pre><code>function calculateTotal() {
      alert('testAlert');
      var prices = $('input[name="prices[]"]').map(function () {
          alert(this.value);
          return this.value;
      }).get();
  }
  </code></pre>
  
  <p>I also tried specifying input field like this: <code>'input[name^="prices"]'</code> and adding the event like this:</p>
  
  <pre><code>$('input[name="prices[]"]').on('blur', function() {
      alert('testAlert');
  });
  </code></pre>
  
  <p>And adding the event by class like this after I added <code>class='priceClass'</code> to my price input fields:</p>
  
  <pre><code>&lt;input type="number" name="prices[]" class="priceClass"&gt;
  $('.priceClass').on('blur', function() {
      alert('testAlert');
  });
  </code></pre>
  
  <p>None of these triggered the event. So how can I add an event to all elements of a HTML input array and get the all values in the input array after the event is triggered?</p>