0

I'm creating a page for an alt currency where a business owner can set prices for various products. The suggested exchange rate is $10 to 1 Current. I want the user to input a dollar price and have the Current input automatically populate at 1/10 the amount in the dollar input.

I have this working for the first set of inputs. However, the user can also add more product inputs by clicking a button. My keyup function does not work for these dynamically created inputs. Any ideas?

JSFiddle

HTML

<div id="product-div" class="small-12 medium-9 small-centered columns">
  <div class="currency-input input-middle small-3 columns">
    <span class="currency-placeholder">$</span>
    <input id="dollar-price-1" class="dollar-price" type="number" placeholder="10" />
  </div>

  <div class="currency-input input-right small-3 columns">
    <svg class="inline currency-placeholder" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="24px" viewBox="11.5 0 75 100" enable-background="new 11.5 0 75 100" xml:space="preserve"><g><text transform="matrix(1 0 0 1 5.8066 87.1475)" font-family="Apple-Chancery" font-size="112.6105" fill="#888888">C</text><text transform="matrix(0.8797 0.0076 -0.0087 1 29.2212 72.208)" font-family="AvenirNext-MediumItalic" font-size="79.8022" fill="#888888">o</text></g></svg>
    <input id="current-price-1" class="current-price" type="number" placeholder="1" />
  </div>
</div>

<button id="add-product">Add product</button>

</button>

JS

var num = 1;

$('#add-product').click(function() {

  num++;

  $('#product-div').append('<div class="currency-input input-middle small-3 columns"><span class="currency-placeholder">$</span><input id="dollar-price-' + num + '" class="dollar-price" type="number" placeholder="10"/></div><div class="currency-input input-right small-3 columns"><svg class="inline currency-placeholder" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="24px" viewBox="11.5 0 75 100" enable-background="new 11.5 0 75 100" xml:space="preserve"><g><text transform="matrix(1 0 0 1 5.8066 87.1475)" font-family="Apple-Chancery" font-size="112.6105" fill="#888888">C</text><text transform="matrix(0.8797 0.0076 -0.0087 1 29.2212 72.208)" font-family="AvenirNext-MediumItalic" font-size="79.8022" fill="#888888">o</text></g></svg><input id="current-price-' + num + '" class="current-price" type="number" placeholder="1"/></div>');
});

$('.dollar-price').keyup(function() {
  var num_id = $(this).attr('id').match(/\d+/);

  $("#current-price-" + num_id).val(this.value / 10);
  return false;
});
dannypernik
  • 172
  • 2
  • 11

0 Answers0